如何消除Dropdown打开延迟，实现即时平滑展开效果？

I totally get the frustration of that 0.5-second delay when opening your dropdowns—let’s eliminate that while keeping the "close first before opening another" behavior intact. The key is to ditch the hardcoded setTimeout and instead use jQuery’s animation callback functions to trigger the next action only after the previous animation finishes.

Here's the updated JavaScript code: #

$(document).ready(function() {
  $(".click").on("click", function(evt) {
    evt.stopPropagation();
    var navItem = $(this);
    
    if (navItem.hasClass("is-active")) {
      // Close current dropdown
      navItem.removeClass("is-active");
      navItem.parent().find(".showup").slideUp(300, function() {
        // Remove black background after close animation completes
        $(".main-container").removeClass("black-bg");
      });
    } else {
      var $activeItems = $(".is-active");
      if ($activeItems.length > 0) {
        // Close any open dropdowns first, then open current one
        $activeItems.removeClass("is-active");
        $activeItems.parent().find(".showup").slideUp(300, function() {
          // Open current dropdown immediately after close animation finishes
          navItem.addClass("is-active");
          navItem.parent().find(".showup").slideDown(500);
          $(".main-container").addClass("black-bg");
        });
      } else {
        // No open dropdowns—open current one right away
        navItem.addClass("is-active");
        navItem.parent().find(".showup").slideDown(500);
        $(".main-container").addClass("black-bg");
      }
    }
  });

  $(".showup").on("click", function(evt) {
    evt.stopPropagation();
  });

  $(document).on("click", function(evt) {
    var $activeItems = $(".is-active");
    if ($activeItems.length > 0) {
      $activeItems.parent().find(".showup").slideUp(300, function() {
        $activeItems.removeClass("is-active");
        $(".main-container").removeClass("black-bg");
      });
    }
  });
});

Key Changes Explained: #

• Removed the 500ms setTimeout for opening dropdowns: Instead, we use the callback function in slideUp()—this means the new dropdown opens right after the previous one finishes closing (300ms later, not a forced 500ms wait).
• Conditional handling for active items: If there are no open dropdowns, we open the clicked one instantly with no delay at all.
• Synchronized background color changes: Background updates are now tied to the animation callbacks, so they happen at the right time without extra delays.
• Cleaned up document click logic: The background is removed only after the dropdown close animation completes, keeping everything in sync.

Your CSS and HTML can stay the same: #

CSS

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

HTML

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

Now when you click a dropdown:

• If it's closed and no other dropdown is open, it slides down instantly with a 500ms animation.
• If another dropdown is open, it closes first (300ms animation) then the new one opens immediately after—no extra delay.
• Closing a dropdown (either by clicking it again or clicking outside) uses the 300ms slide up animation as requested.

内容的提问来源于stack exchange，提问作者Nesta