添加另一个级别 - 侧边菜单 HTML/Bootstrap 3/JS答案

【问题标题】：Add another level - side menu HTML/Boostrap 3/JS添加另一个级别 - 侧边菜单 HTML/Bootstrap 3/JS
【发布时间】：2017-05-27 04:13:06
【问题描述】：

如何从页面底部的 HTML 向此菜单结构添加另一个级别？

当前

Test

--->a
--->b

我想做的事

Test

   --->a
           --->1
           --->2
   --->b
           --->1
           --->2

html

<li class="nav-header">
    <a data-target="#menu5" data-toggle="collapse" href="#">
    <h3>test</h3></a>
    <ul class="list-unstyled collapse" id="menu5">
        <li>
            <a href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
        </li>
        <li>
            <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a>
        </li>
    </ul>
</li>

【问题讨论】：

bootply.com/QutOBjvgha
???这似乎不是我要找的东西
示例on the Bootstrap 3 website 显示多级菜单...

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

<ul>
  <li class="nav-header">
                <a data-target="#menu5" data-toggle="collapse" href="#">
                <h3>test</h3></a>
                <ul class="list-unstyled collapse" id="menu5">
                    <li>
                        <a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
                        <ul class="list-unstyled collapse" id="submenu">
                           <li> 1 </li>
                           <li> 2</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a>
                    </li>
                </ul>
  </li>
</ul>

我相信您只需要创建另一个具有唯一 ID 的折叠元素。使用 <a> 元素作为切换开关。

【讨论】：