jQuery slideToggle不關閉Div

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

將click事件附加到關閉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>