Twitter 的 Bootstrap 下拉菜单和点击事件 [英] Twitter's Bootstrap dropdowns with click event

问题描述

我使用的是 Twitter 引导程序下拉菜单"，而不是带有 html 标记的下拉菜单"多级菜单.

 
<li><a tabindex="-1" href="#">Action</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><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 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');返回假；});

示例:http://bootply.com/66088

注意当你有多个子菜单时，给每个子菜单分配自己的类

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屋！