我有一个下拉菜单,我想在悬停时保持打开状态。我以前使用过 .click() 并且它会保持打开状态,但是当我将代码更改为 .hover() 时,一旦我将鼠标移离顶部链接,它就会消失。 这是我的代码:
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#"><span></span></a>
</div>
<ul class="nav-list">
<li><a href="#">Solutions</a>
<ul class="nav-dropdown">
<li><a href="#">Click & Collect</a></li>
<li><a href="#">Endless Aisle</a></li>
<li><a href="#">Ship from Store</a></li>
<li><a href="#">Partner Dropship</a></li>
<li><a href="#">In-Store Returns</a></li>
<li><a href="#">Fulfillment Optimization</a></li>
</ul>
</li>
<li><a href="#">The Way We Work</a>
<ul class="nav-dropdown">
<li><a href="#">Software as a Service</a></li>
<li><a href="#">Delivering Best Practice</a></li>
<li><a href="#">Reusable Integrations</a></li>
<li><a href="#">Partner Collaboration</a></li>
<li><a href="#">Sharing Success</a></li>
<li><a href="#">Living Our Values</a></li>
</ul>
</li>
<li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a>
<ul class="nav-dropdown">
<li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li>
<li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li>
<li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li>
<li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li>
</ul>
</li>
</ul>
</nav>
这是我的 jquery: (
function($) {
$(function() {
$('nav ul li > a').not($('.only-child')).mouseenter(function(e){
$(this).siblings('.nav-dropdown').slideToggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('nav ul li > a').not($('.only-child')).mouseleave(function(e) {
$(this).siblings('.nav-dropdown').slideToggle();
e.stopPropagation();
})
$('html').click(function(){
$('.nav-dropdown').hide();
});
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
如何让它在悬停时工作?
最佳答案
您在使用悬停选择器时犯了一些错误,您必须使用parent > child
选择器。并删除鼠标悬停效果,我对您的代码进行了一些更改以使其更具可读性,请检查:
$(".nav-dropdown").hide()
$('nav > ul > li > a:not(.only-child)').mouseenter(function(e){
$('.nav-dropdown').hide();
$(this).next('.nav-dropdown').slideToggle();
e.stopPropagation();
});
/*$('nav ul li > a:not(.only-child)').mouseleave(function(e) {
$(this).siblings('.nav-dropdown').slideToggle();
e.stopPropagation();
})*/
$('html:not(.nav-dropdown)').click(function(){
$('.nav-dropdown').hide();
});
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
.nav-list > li{
border: 1px solid black;
width: 300px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#">Slide List under me<span></span></a>
</div>
<ul class="nav-list">
<li>
<a id="test1" href="#">Solutions</a>
<ul class="nav-dropdown">
<li><a href="#">Click & Collect</a></li>
<li><a href="#">Endless Aisle</a></li>
<li><a href="#">Ship from Store</a></li>
<li><a href="#">Partner Dropship</a></li>
<li><a href="#">In-Store Returns</a></li>
<li><a href="#">Fulfillment Optimization</a></li>
</ul>
</li>
<li><a href="#">The Way We Work</a>
<ul class="nav-dropdown">
<li><a href="#">Software as a Service</a></li>
<li><a href="#">Delivering Best Practice</a></li>
<li><a href="#">Reusable Integrations</a></li>
<li><a href="#">Partner Collaboration</a></li>
<li><a href="#">Sharing Success</a></li>
<li><a href="#">Living Our Values</a></li>
</ul>
</li>
<li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a>
<ul class="nav-dropdown">
<li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li>
<li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li>
<li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li>
<li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li>
</ul>
</li>
</ul>
</nav>
关于javascript - 悬停 jquery 时保持子菜单打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47010590/