javascript - jQuery slideToggle 一次切换多个 Div

Question

这是我的代码，

$(document).ready(function (e) {
$('.showhide').click(function(e) {
$(this).nextAll('.dropdown:lt(1)').slideToggle(100);
e.stopPropagation();
});
$(window).click(function(e) {
var container = $(".dropdown");
if (container.is(':visible') && !$(e.target).closest('.dropdown').length) {
container.hide();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>


<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>

此代码可以很好地打开和关闭 div。此外，如果我在 div 打开时单击外部，它会很好地关闭它们。

但是，问题是如果我一个接一个地单击它们，它会同时打开多个 div。我怎样才能一次只打开一个 div？

Answer 1

您可以在单击任何 showhide 元素时隐藏 siblings。

$('.dropdown').hide()

$('.showhide').click(function(e) {
  e.stopPropagation();
  $(this).siblings('.showhide').next('.dropdown').slideUp()
  $(this).next('.dropdown').slideToggle(100);
});

$(window).click(function(e) {
  var container = $(".dropdown");
  if (container.is(':visible') && !$(e.target).closest('.dropdown').length) {
    container.hide();
  }
});

a.showhide {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showhide">Button</a>
<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>


<a class="showhide">Button</a>
<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>