Question

我正在尝试在Bootstrap 3中创建子菜单（我们都知道它已被删除），我想在点击而不是悬停时显示菜单的第2和第3级。

出于某种原因，每次我点击第二级或第三级时，它只是关闭下拉菜单，就好像它正在切换常规引导程序打开/关闭功能一样。

我需要在庄园工作...... 1.）单击顶层 - 显示下拉项目 2.）从下拉列表中单击项目 - 显示第二级项目 3.）点击第二级的项目 - 显示第三级项目

基本上我想激活这个css类

.dropdown-submenu:hover>.dropdown-menu{display:block;}

点击而不是悬停。

目前我已尝试过以下

链接到小提琴 http://jsfiddle.net/Tenacity/ejLDg/1/

你最好能解决这个问题吗？随意将整个示例分开以实现解决方案，因为我完全卡住了。提前谢谢。

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">Your Logo Here</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">           
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="test1">Top Level <b class="caret"></b></a>         
                <ul class="dropdown-menu">



                 <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">To 2nd</a>
                    <ul class="dropdown-menu">
                      <li class="dropdown-submenu">
                        <a href="#">2nd to 3rd</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">3rd level</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
            </li>          
        </ul>
      </div>
    </nav>

CSS

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}

JS

$(document).ready(function() {
   $('.dropdown-submenu').on('click', function(){
   $(this).parent().addClass('open');
   $(".btn-navbar").click();
   alert("clicked");
  });
});

提前致谢：D

Answer 1

看看：

$( ".dropdown-submenu" ).click(function(event) {
    // stop bootstrap.js to hide the parents
    event.stopPropagation();
    // hide the open children
    $( this ).find(".dropdown-submenu").removeClass('open');
    // add 'open' class to all parents with class 'dropdown-submenu'
    $( this ).parents(".dropdown-submenu").addClass('open');
    // this is also open (or was)
    $( this ).toggleClass('open');
});

演示：http://jsfiddle.net/ejLDg/18/

Bootstrap中的子菜单3添加单击打开功能

1 个答案: