点击jQuery帮助推特引导多个下拉菜单
Twitter Bootstrap multiple dropdowns on click - jQuery assistance
我需要一些帮助来修改控制引导程序下拉列表的javascript。
我需要做的是,当你点击下拉列表时,它会显示出来。在顶层,这很好,但如果我想进入下拉列表中的下拉列表示例:
<ul>
<li>Dropdown 1
<ul>
<li>Dropdown 2
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
</li>
</ul>
当我点击下拉列表1时,我可以看到名为下拉列表2的列表项,但当我点击它时,它会再次关闭整个列表项。当你点击下拉列表2时,我需要它显示出来。我找到了一个悬停方法来打开第二个嵌套的下拉列表,但我需要它在点击时显示。
我们非常感谢您的帮助。这是一把小提琴:http://jsfiddle.net/raDUC/1/
试试这个:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> <a href="#">Another action</a>
</li>
</ul>
</li>
<li> <a href="#">Link</a>
</li>
<li> <a href="#">Link</a>
</li>
<li> <a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
旁注。。。我建议在引导程序中将以下css添加到导航菜单中:
ul.nav a {
outline: none;
}
如果你点击主菜单项关闭它,它会阻止丑陋的蓝色轮廓出现。
相关文章:
- 更改下拉菜单上的图像javascript/jquery
- 自定义Jquery css下拉菜单问题
- 如何使Jquery编码的动态下拉菜单与PHP GET变量协调工作
- jQuery侧导航下拉菜单
- 使用JQuery通过下拉菜单筛选HTML表值
- 如何在jquery mobile中使用json文件创建动态下拉菜单
- 下拉菜单打开宽度Jquery
- 如何使用jquery将两个字段组合为下拉菜单中的选项
- Jquery下拉菜单的奇怪行为
- jQuery导航下拉菜单未显示..任何想法
- jQuery下拉菜单图像更改
- 使用下拉菜单排除jquery错误
- 下拉菜单重定向使用AJAX和JQuery或Javascript
- 一系列下拉菜单,由jQuery提供支持,隐藏和显示,但不在Chrome中
- Jquery下拉菜单和输入表单功能不太正常
- 关于jquery.off和下拉菜单
- Jquery下拉菜单位于幻灯片上方的一个显示位置
- jQuery子菜单在折叠时仍然显示下拉菜单
- 无法创建下拉菜单 - jQuery
- 下拉菜单jQuery