我正在尝试在 Bootstrap 3 中创建子菜单(我们都知道它已被删除)并且我想通过单击而不是悬停来显示菜单的第二级和第三级。
出于某种原因,每次我单击第二级或第三级时,它都会简单地关闭下拉菜单,就好像它正在切换常规 Bootstrap 打开/关闭功能一样。
我需要在庄园工作... 1.) 点击顶层 - 显示下拉项 2.) 从下拉列表中单击元素 - 显示二级元素 3.) 从第 2 级点击元素 - 显示第 3 级元素
基本上我想激活这个css类
.dropdown-submenu:hover>.dropdown-menu{display:block;}
点击而不是悬停。
目前我尝试了以下方法
fiddle 链接 http://jsfiddle.net/Tenacity/ejLDg/1/
您最好能在 fiddle 上解决您的问题。当我完全陷入困境时,请随意撕开整个示例以实现解决方案。提前致谢。
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
最佳答案
看看:
$( ".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');
});
关于javascript - Bootstrap 3 子菜单添加点击打开功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24899026/