多个下拉菜单滑动切换

Multiple dropdown menus slide toggle

本文关键字：下拉菜单      更新时间：2023-09-26

我有三个（或更多）下拉菜单，当点击"触发器"时会显示

代码是有效的，但我希望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();
    }
});

您可以添加一个延迟

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

但正如评论中指出的那样，最好使用回调。

Codepen示例

有一种方法可以在不使用定时器的情况下实现这一点。您基本上可以向具有幻灯片的元素添加一个类，并使用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()
      }
})
相关文章：