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


菜鸟一枚,参考了网上一个基于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 & 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 & graphs</a></div> <h1>Charts & 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>

bootstrap

tsumugi 9 years, 10 months ago

可以用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

姆QBei answered 9 years, 10 months ago

Your Answer