bootstrap里submenu菜单无法下拉，求助~

Question

菜鸟一枚，参考了网上一个基于bootstrap的后台管理html模板，原模板下，submenu菜单可以下拉，但我删去某几个row-fluid后，submune菜单就失灵了，折腾了2天还是没找到原因，求各位大神指点，谢谢！
（我删去的是下面代码中后3个小row-fluid块，分别是Bar chart，Pie chart和Line chart）

部分代码如下：

<div id="sidebar"> <a href="#" class="visible-phone"><i class="icon icon-signal"></i> Charts &amp; graphs</a>
  <ul>
    <li><a href="charts.html"><i class="icon icon-home"></i> <span>Echarts简介</span></a> </li>
    <li class="submenu"> <a href="#"><i class="icon icon-signal"></i> <span>Echarts Examples</span> <span class="label label-important">3</span></a>
      <ul>
        <li><a href="折线（面积）图.html">折线（面积）图</a></li>
        <li><a href="柱状（条形）图.html">柱状（条形）图</a></li>
        <li><a href="散点（气泡）图.html">散点（气泡）图</a></li>
      </ul>
    </li>
   </ul>
</div>





<div id="content">

  <div id="content-header">
    <div id="breadcrumb"><a href="#" title="回到主页" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Charts &amp; graphs</a></div>
    <h1>Charts &amp; graphs</h1>
  </div>

  <div class="container-fluid">
    <hr>

    <div class="row-fluid">
      <div class="span6">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>标准散点图</h5>
          </div>
          <div class="widget-content">
            <div id="placeholder"></div>
            <p id="choices"></p>
          </div>
        </div>
      </div>
      
      <div class="span6">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>标准气泡图</h5>
          </div>
          <div class="widget-content">
            <div id="placeholder2"></div>
            <p id="choices"></p>
          </div>
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <div class="span12">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Bar chart</h5>
          </div>
          <div class="widget-content">
            <div class="chart"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row-fluid">
      <div class="span6">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Pie chart</h5>
          </div>
          <div class="widget-content">
            <div class="pie"></div>
          </div>
        </div>
      </div>
      <div class="span6">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Line chart</h5>
          </div>
          <div class="widget-content">
            <div class="bars"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

可以用BootStrap的 JS collapse来实现

<li class="submenu" data-toggle="collapse" data-target="#submenu1"> <a href="#"><i class="icon icon-signal"></i> <span>Echarts Examples</span> <span class="label label-important">3</span></a>
  <ul id="submenu1" class="collapse">
    <li><a href="折线（面积）图.html">折线（面积）图</a></li>
    <li><a href="柱状（条形）图.html">柱状（条形）图</a></li>
    <li><a href="散点（气泡）图.html">散点（气泡）图</a></li>
  </ul>
</li>

更详细的请参考下面的链接，需要科学上网才能访问。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp