Bootstrap中的子菜单3添加单击打开函数 [英] Submenus In Bootstrap 3 Adding Click Open Functions

问题描述

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

由于某种原因，每次我点击第二级或第三级，它只是关闭下拉菜单，如果它是切换常规bootstrap打开/关闭功能。

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

基本上我想激活css class

  .dropdown-submenu：hover> .dropdown-menu {display：block;} 
  
 
 
目前我已经尝试过
 
 
 
链接到小提琴
  http ：//jsfiddle.net/Tenacity/ejLDg/1/  
 
 
 
最好是你能解决问题。随意撕开这个整个例子分开来实现一个解决方案，因为我完全卡住。提前感谢。
 
 
 
 HTML 
 < nav class = navbar navbar-default navbar-fixed-toprole =navigation> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =index.html>您的徽标此处< / a> 
< / div> 
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdownid =test1>顶级< b class =caret>< / b& < / a> 
< ul class =dropdown-menu> 
 
 
 
< li class =dropdown-submenu> 
< a tabindex = -  1href =＃>到第2< / a> 
< ul class =dropdown-menu> 
< li class =dropdown-submenu> 
< a href =＃>第2到第3< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>第三级< / 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 {
 $（'。dropdown-submenu'）。on（'click'，function（）{
 $（this）.parent（）。addClass（'open'）; 
 $ （.btn-navbar）。click（）; 
 alert（clicked）; 
}）; 
}）; 
  
提前感谢：D 
解决方案
看看：
  $（.dropdown-submenu）.click （event）{
 //停止bootstrap.js隐藏父项
 event.stopPropagation（）; 
 //隐藏打开的子项
 $（this）.find 
 $（this）.parents（。dropdown-submenu）。removeClass（'open'）; 
 //通过类'dropdown-submenu'子菜单）addClass（'open'）; 
 //这也是开放的（或者是）
 $（this）.toggleClass（'open'）; 
} 
  
 演示：http://jsfiddle.net/ejLDg/18/   
 
I am trying to create submenus within Bootstrap 3 (which we all know have been removed) and I would like to display the 2nd and 3rd levels of the menu on a click instead of a hover.

For some reason every time I click on 2nd level or third level it simply closes the dropdown menu as if it is toggling the regular bootstrap open/close function.   

I need to work in a manor...
1.) Click on Top level - display down-drop items
2.) Click on item from drop-down - displays 2nd level items
3.) Click on item from 2nd level - displays 3rd level items 

basically i want to activate this css class  
.dropdown-submenu:hover>.dropdown-menu{display:block;}
on a click instead of a hover.

Currently i have tried the following

Link To Fiddle
http://jsfiddle.net/Tenacity/ejLDg/1/

Preferably can you should your solution on the fiddle.  Feel free to rip this entire example apart to achieve a solution as i'm completely stuck.  Thanks in advance.

The 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>
The 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;}
The JS
$(document).ready(function() {
   $('.dropdown-submenu').on('click', function(){
   $(this).parent().addClass('open');
   $(".btn-navbar").click();
   alert("clicked");
  });
});
Thanks in advance :D
解决方案
take a look:
$( ".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');
});
demo: http://jsfiddle.net/ejLDg/18/

                        
这篇关于Bootstrap中的子菜单3添加单击打开函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！