Question

这段代码打开div很好，但是当我再次点击按钮时，不是关闭它重新打开div。如何在第二次点击时关闭？

$(document).ready(function() {
  $('.showhide').click(function(e) {
    $(this).nextAll('.dropdown:lt(1)').slideToggle(100);
  });
  
  $(document).mouseup(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 href="#" class="showhide">Button</a><br />

<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>
<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>
<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>

Answer 1

使用

进行测试

$(this).nextAll('.dropdown:lt(1)').is(":visible"))

Answer 2

将单击事件附加到关闭div的窗口。将单击事件附加到按钮以停止传播到文档正文

$(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 href="#" class="showhide">Button</a><br />

<div class="dropdown">
  <a href="#">Update</a>
  <a href="#">Delete</a>
</div>

jQuery slideToggle Not Closing Div

2 个答案: