Question

如何在不拖延的情况下立即打开下拉菜单？当您单击打开下拉列表时，它会延迟半秒，直到打开。这是由setTimeout引起的（函数（）延迟500ms。我必须使用它才能在第一个关闭时打开第二个下拉菜单......我只是想不出更好的事情因此，当你打开一个下拉列表时，它不会立即打开:( 我希望它是即时的，但是以500毫秒的速度平稳地打开，并以300毫秒的速度关闭。

谢谢。

＆＃13;

$(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);
    }
});

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

Answer 1

请尝试此

我仅针对剧本进行更改。

＆＃13;

$(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");
        },200);
      }else{
        $(".is-active").removeClass("is-active");
        $(".showup").slideUp(200);
        setTimeout(function() {
          navItem.addClass("is-active");
          navItem.parent().find(".showup").slideDown(500);
          $(".main-container").removeClass("black-bg");
          $(".main-container").addClass("black-bg");
        },200);
      }
    });
    $(".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);
    }
});

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

下拉立即打开

1 个答案: