我使用的是 twitter bootstrap“下拉菜单”,而不是带有 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>
我有一个问题。我可以添加点击事件来显示子菜单吗?
最佳答案
子菜单由 css 显示。因此,首先禁用 CSS(悬停)并向菜单项添加单击事件。
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>
禁用 CSS:
.dropdown-submenu:hover > .dropdown-menu {
display: none;
}
通过javascript触发点击:
$('.dropdown-submenu').click(function(){
$('.dropdown-submenu > .dropdown-menu').css('display','block');
return false;
});
注意,当您有多个子菜单时,请为每个子菜单指定自己的类别
关于twitter-bootstrap - Twitter 的带有点击事件的 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17386993/