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);
});

这是一个基本的例子：

＆＃13;

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

＆＃13;

.hidden { display: none; }

＆＃13;

<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>

＆＃13;

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

1 个答案: