Twitter bootstrap 引导导航

我有一个引导导航药片的小样本，我有下拉部分工作，但我试图找出是否有办法使它像手风琴一样打开和关闭，而不是下拉部分/

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

如果希望子菜单具有手风琴行为，而不是使用下拉组件，则最好使用折叠组件

对于代码，您需要使用类

.collapse

和ID指定子菜单元素

<div id="demo" class="collapse">
  <ul>
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>
  </ul>
</div>

看看这里，这不是我要找的，导航堆叠对我有用，我想要的不是下拉列表，而是展开以显示子链接如果我读得正确，你想做的是一个可折叠的子菜单？@CrisMVP3200正确吗

<li>
    <a data-toggle="collapse" data-target="#demo" href="javascript:void(0)">
        Menu 1 <span class="caret"></span>
    </a>
    <div id="demo" class="collapse">
        <!-- Content of your collapsible element -->
    </div>
</div>
</li>

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li>
        <a data-toggle="collapse" data-target="#demo" href="javascript:void(0)">
            Menu 1 <span class="caret"></span>
        </a>
        <div id="demo" class="collapse">
            <ul>
                <li><a href="#">Submenu 1-1</a></li>
                <li><a href="#">Submenu 1-2</a></li>
                <li><a href="#">Submenu 1-3</a></li>
            </ul>
        </div> 
    </li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>