Как я могу сделать раскрывающийся список мгновенно без каких-либо задержек?В тот момент, когда вы щелкаете, чтобы открыть раскрывающийся список, у него есть задержка на полсекунды до его открытия.Это вызвано setTimeout (function () с задержкой 500 мс. Я должен был использовать это для того, чтобы открыть второй раскрывающийся список только тогда, когда первый закрыт ... Я просто не мог придумать ничего лучшего, и из-за этого, когда выоткрыть раскрывающийся список, он не открывается мгновенно :( Я хотел, чтобы он был мгновенным, но плавно открывался со скоростью 500 мс и закрывался со скоростью 300 мс.
Спасибо.
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
var navItem = $(this);
if (navItem.hasClass("is-active")) {
navItem.removeClass("is-active");
navItem.parent().find(".showup").slideUp(300);
setTimeout(function() {
$(".main-container").removeClass("black-bg");
},500);
}else{
$(".is-active").removeClass("is-active");
$(".showup").slideUp(300);
setTimeout(function() {
navItem.addClass("is-active");
navItem.parent().find(".showup").slideDown(500);
$(".main-container").removeClass("black-bg");
$(".main-container").addClass("black-bg");
},500);
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function(evt) {
$(".is-active").parent().find(".showup").slideUp(300);
$(".is-active").toggleClass("is-active");
if ($(".main-container").hasClass("black-bg")) {
setTimeout(function() {
$(".main-container").toggleClass("black-bg");
}, 500);
}
});
* {
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: left;
}
.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;
}
.is-active {
background: red;
}
<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>