Закройте раскрывающийся список полностью, прежде чем открыть другой

Question

Я создаю раскрывающееся меню, и мне нужно добавить в него следующие функции:

Когда открыт один раскрывающийся список и открывается другой, предыдущий должен полностью закрыться, прежде чем новый начнет открываться независимо от того, установлена ​​ли быстрая или медленная скорость раскрытия.

Нажмите, чтобы увидеть DEMO

1012 * JQuery *

$(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 функция обратного вызова, вызываемая после завершения анимации, вызывается один раз для соответствующего элемента.

Вы должны сначала скрыть все открытые, а затем вызвать slideDown внутри полного обратного вызова slideUp, чтобы после того, как открытое меню было полностью закрыто, открылось новое раскрывающееся меню.

Обратите внимание на 2 параметра, переданных в stop(), поэтому при одновременном нажатии анимация не должна продолжаться, вместо этого происходит переход к последнему состоянию, либо показанному, либо скрытому

См. Демонстрацию ниже.

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