我有一个使用Boostrap 3的导航菜单,我无法弄清楚如何禁用悬停""子菜单的功能。我希望子菜单只在点击时打开。
https://jsfiddle.net/elalgarro/q1vddxhx/
类似的东西:
$(".dropdown-submenu").hover(function(){ dontOpen() })
$(".dropdown-submenu").click(function(){ openIt() })
但是我无法在悬停时打开它。
修改
归功于Zakaria Acharki的工作就像一个魅力:)
在我的实际应用程序.dropdown-submenu:hover
中的被隐藏在bootstrap css文件中的某个地方。所以我将我的css文件更改为
.dropdown-submenu:hover>.dropdown-menu{
display:none;
}
然后这个jQuery:
$('.dropdown-submenu').on('click', function(e){
e.stopPropagation();
$(this).find('.dropdown-menu:eq(0)').toggle();
})
注意子菜单现在没有关闭,单击时需要添加更多代码才能关闭子菜单。
答案 0 :(得分:0)
<强> Working Fiddle 强>
首先,您要从CSS代码中删除此部分:
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
然后使用jQuery编写执行相同操作的代码:
$('.dropdown-submenu').on('click', function(e){
e.stopPropagation();
$(this).find('.dropdown-menu:eq(0)').toggle();
})
编辑:要在点击时关闭菜单,只需将点击事件附加到整个html
:
$('html').click(function() {
$('.dropdown-submenu ul').hide();
});
希望这有帮助。
$('.dropdown-submenu').on('click', function(e) {
e.stopPropagation();
$(this).find('.dropdown-menu:eq(0)').toggle();
})
$('html').click(function() {
$('.dropdown-submenu ul').hide();
});
#parentMenu {
display: block;
top: 0;
}
/* Helps position submenu */
.dropdown-submenu {
position: relative;
}
/* Menus under the submenu should show up on the right of the parent */
.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;
}
/* Add carot to submenu links */
.dropdown-submenu>a:after {
display: block;
float: right;
/*simple */
content: "►";
color: #cccccc;
/* looks a little better */
content: " ";
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;
}
/* Change carot color on hover */
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" />
<ul class="dropdown-menu" id="parentMenu" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<!-- Child Menu -->
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<!-- Grandchild Menu -->
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</li>
</ul>