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

Question

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

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

如何扩展该代码？

问候帕特里克

Answer 1

您可以 select 除了被点击的元素之外的所有下拉元素（通过使用 .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>

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

Toggle one <div> and close another?

jquery

toggle