多個下拉菜單滑動切換

Question

單擊“觸發器”時，會顯示三個（或將來會有更多）下拉菜單

該代碼可以正常工作，但是我希望slideUp動畫在另一個slideDown動畫開始之前完成。

請注意，“下拉”元素相對於“容器”的位置絕對是最高的：100％，因此它們顯示在“觸發器”下方

Codepen上的代碼

的HTML

 <div class="container">
  <div class="drop-container">
   <span class="trigger">Drop 1</span>
   <div class="dropdown">
    <p>First Dropdown</p>
   </div>
  </div>
  <div class="drop-container">
   <span class="trigger">Drop 2</span>
   <div class="dropdown">
    <p>Second dropdown</p>
   </div>
  </div>
  <div class="drop-container">
   <span class="trigger">Drop 3</span>
   <div class="dropdown">
    <p>Third dropdown</p>
   </div>
  </div>
 </div>

jQuery的

var $container = $('.drop-container'),
    $trigger = $('.trigger');

$trigger.on('click',function(){

    var $this = $(this).siblings('.dropdown');


    $container.find('.dropdown').slideUp();

    if($this.is(':visible')) {
        $this.hide('fast');
    }

    else {
        $this.slideDown();
    }
});

Answer 1

您可以添加一個延遲

$this.delay(500).slideDown();

但正如注釋中指出的那樣，使用回調會更好。

Codepen示例

Answer 2

有一種方法可以不使用計時器。 您基本上可以向向下滑動的元素添加一個類，並使用jQuery滑動的“ oncomplete”屬性。 將您的JavaScript替換為以下內容，即可在此處運行示例

$container = $('.drop-container')
  $trigger = $('.trigger')
  $trigger.on('click',function(){
  var $drop = $(this).siblings('.dropdown')
  $down = $container.find('.down')
  if($down.length > 0){
    $down.slideUp(function() {
      $(this).removeClass('down')
      $drop.addClass('down')
      $drop.slideDown()
  })
  }
  else{
      $drop.addClass('down')
      $drop.slideDown()
      }

})