Twitter 的 Bootstrap 下拉菜单和点击事件 [英] Twitter's Bootstrap dropdowns with click event
本文介绍了Twitter 的 Bootstrap 下拉菜单和点击事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是 Twitter 引导程序下拉菜单",而不是带有 html 标记的下拉菜单"多级菜单.
<li class="divider"></li><li><a tabindex="-1" href="#">分隔链接</a></li><li><a tabindex="-1" href="#">这里还有别的东西</a><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"><li><a tabindex="-1" href="#">Action</a></li><li><a tabindex="-1" href="#">另一个动作</a></li><li><a tabindex="-1" href="#">这里还有别的东西</a></li><li class="divider"></li><li><a tabindex="-1" href="#">分隔链接</a></li><li class="divider"></li><li><a tabindex="-1" href="#">分隔链接</a></li>
我有一个问题.我可以添加点击事件来显示子菜单吗?
解决方案
子菜单由 css 显示.因此,首先禁用 css(悬停)并为您的菜单项添加一个点击事件.
html 示例:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">显示菜单</a><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"><li><a tabindex="-1" href="#">Action</a></li><li><a tabindex="-1" href="#">另一个动作</a></li><a tabindex="-1" href="#">更多选项</a><ul class="下拉菜单"><li><a tabindex="-1" href="#">Action</a></li><li><a tabindex="-1" href="#">另一个动作</a></li> <li class="divider"></li><li><a tabindex="-1" href="#">分隔链接</a></li>
禁用 css:
.dropdown-submenu:hover >.下拉式菜单 {显示:无;}
通过javascript触发点击:
$('.dropdown-submenu').click(function(){$('.dropdown-submenu > .dropdown-menu').css('display','block');返回假;});
注意当你有多个子菜单时,给每个子菜单分配自己的类
I'm using twitter bootstrap "dropdowns" not a "dropdown" multilevel menu with html markup.
<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?
解决方案
The submenus are showed by css. So first disable the css (hover) and add a click event to your menu item.
html example:
<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:
.dropdown-submenu:hover > .dropdown-menu {
display: none;
}
trigger the click by 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
这篇关于Twitter 的 Bootstrap 下拉菜单和点击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文