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>
tsumugi
9 years, 10 months ago
Answers
可以用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