jquery - 切换一个 <div> 并关闭另一个？

Question

我刚刚开始练习 jQuery，并编写了这个小片段来打开菜单项上的下拉菜单。问题是，如果我打开另一个下拉列表，我想关闭事件的下拉列表。

$(document).ready(function(){
  $(".dropdown").click(function(){ 
    $(this).children(".hidden").slideToggle(300);
  });
});

如何扩展该代码？

问候 帕特里克

Answer 1

您可以选择除单击的元素之外的所有下拉元素(通过使用 .not() method 否定 this )，然后调用 .slideUp() 方法在子 .hidden 元素上:

$(".dropdown").click(function(){
  $(".dropdown").not(this).children(".hidden").slideUp();
  $(this).children(".hidden").slideToggle(300);
});

这是一个基本示例:

$(".dropdown").click(function(){
  $(".dropdown").not(this).children(".hidden").slideUp();
  $(this).children(".hidden").slideToggle(300);
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button>Dropdown</button>
  <div class="hidden">Some hidden dropdown menu</div>
</div>

<div class="dropdown">
  <button>Dropdown</button>
  <div class="hidden">Some hidden dropdown menu</div>
</div>

<div class="dropdown">
  <button>Dropdown</button>
  <div class="hidden">Some hidden dropdown menu</div>
</div>