twitter-bootstrap Twitter 的 Bootstrap 下拉菜单和点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17386993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter's Bootstrap dropdowns with click event
提问by Peter Hyman
I'm using twitter bootstrap "dropdowns" not a "dropdown" multilevel menu with html markup.
我使用的是 Twitter 引导程序“下拉菜单”，而不是带有 html 标记的“下拉菜单”多级菜单。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Something else here</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
I have a question. Can I add click event to show submenu?
我有个问题。我可以添加点击事件来显示子菜单吗？
回答by Bass Jobsen
The submenus are showed by css. So first disable the css (hover) and add a click event to your menu item.
子菜单由 css 显示。因此，首先禁用 css（悬停）并将单击事件添加到您的菜单项。
html example:
html示例：
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
disable css:
禁用 css：
.dropdown-submenu:hover > .dropdown-menu {
display: none;
}
trigger the click by javascript:
通过 javascript 触发点击：
$('.dropdown-submenu').click(function(){
$('.dropdown-submenu > .dropdown-menu').css('display','block');
return false;
});
Example: http://bootply.com/66088
NOTE when you have more as one submenu give each its own class
注意当您有多个子菜单时，请给每个子菜单提供自己的类
