Question

点击“触发器”时，我有三个（或将来会有更多）下拉菜单

代码功能正常，但我想在另一个slideDown动画开始之前完成slideUp动画。

请注意，“下拉列表”元素位于绝对顶部：相对于“容器”为100％，因此它们显示在“触发器”下

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 Example

Answer 2

有一种方法可以在不使用计时器的情况下完成此操作。您基本上可以向已向下滑动的元素添加一个类，并使用＆＃34; oncomplete＆＃34; jQuery幻灯片的属性。用以下内容替换您的javascript，它应该可以正常运行示例here

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

})

多个下拉菜单可以滑动切换

2 个答案: