在打开另一个下拉列表之前，请完全关闭一个下拉列表

Question

我正在构建一个下拉菜单，需要向其添加以下功能：

当一个下拉列表打开并打开另一个下拉列表时，无论下拉列表速度设置为多快或多慢，前一个下拉列表都需要在新下拉列表开始打开之前完全关闭。

点击观看演示

杰奎里

$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
var th = $(this);
if (th.hasClass("active")) {
th.removeClass("active");
th.parent().find(".showup").slideUp(900);
$(".main-container").removeClass("black-bg");
}else{
$(".active").removeClass("active");
$(".showup").slideUp(900);
$(".main-container").removeClass("black-bg");
setTimeout(function(){
th.addClass("active");
th.parent().find(".showup").slideDown(900);
$(".main-container").addClass("black-bg");
},250);
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(900);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});

谢谢你的帮助。

Answer 1

您需要将.stop(clearQueue,jumpToEnd)与slideUp()和slideDown()的第二个参数一起使用，即complete回调函数在动画完成后调用，每个匹配的元素调用一次。

您应该首先隐藏所有打开的菜单，然后在slideUp的完整回调中调用slideDown，以便在打开的菜单完全关闭后，应打开新的下拉列表。

请注意传递给stop()的 2 个参数，以便当您同时单击动画时，动画不应继续播放，而是跳到显示或隐藏的最后一个状态

请参阅下面的演示。

$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}

* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 12px;
font-family: Arial;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
width: 100%;
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: right;
}
.top-bar-section a.active {
background: #c8c8c8;
color: #000;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 50px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
<a href="#" class="click">Nav item 1</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 2</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 3</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 4</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>

Answer 2

检查是否有任何.active，如果是，则setTimeout()900 毫秒，如果没有，setTimeout()0 毫秒(实际上它会是 4 毫秒，但它永远不会 100% 准确(。

$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
var th = $(this);
if (th.hasClass("active")) {
th.removeClass("active");
th.parent().find(".showup").slideUp(900);
$(".main-container").removeClass("black-bg");
} else {
let ms = $(".active").length>0 ? 900:0;
$(".active").removeClass("active");
$(".showup").slideUp(900);
$(".main-container").removeClass("black-bg");
setTimeout(function() {
th.addClass("active");
th.parent().find(".showup").slideDown(900);
$(".main-container").addClass("black-bg");
}, ms);
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(900);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});

* {
box-sizing: border-box;
}
body {
margin: 0;
}
.nav-wrapper {
width: 100%;
overflow: hidden;
background: #424242;
}
nav {
/*width: 1024px;*/
margin: auto;
overflow: hidden;
background: #424242;
}
.nav-content {
width: 100%;
z-index: 999;
background: #ccc;
}
.top-bar-section {
float: right;
}
.top-bar-section a.active {
background: #f00;
}
.showup {
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
}
p {
font-size: 14px;
line-height: 1.4;
}
li.nav-item {
display: inline-block;
background: #f5f5f5;
}
li.nav-item a {
display: block;
text-decoration: none;
padding: 10px;
}
.main-container {
width: 80%;
height: 400px;
margin: auto;
}
.black-bg {
background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
<a href="#" class="click">Nav item 1</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 2</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 3</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 4</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>