JS slideToggle關閉其他打開的div

Question

我在頁面上大約有20個按鈕。 我已經用jquery設置了它們以滑動切換以顯示和隱藏div。 它工作良好，但前提是在選擇新的div之前使用相同的按鈕關閉div。 我希望如果單擊一個按鈕，它會向上滑動打開的div，然后再向下滑動自己的div。 現在，如果div仍在顯示，並且單擊了另一個按鈕，則打開的div不會關閉。

我認為有太多按鈕無法創建if函數，以在打開時按名稱測試每個div，然后向上滑動。 所有開放的div都有通用的滑蓋嗎？

如果我添加一個類並使用css來顯示：塊，則不會獲得動畫，因此我正在使用slidetoggle。 如果有更好的方法，我很樂意重做我的代碼？ 有沒有辦法關閉開放的股利？

$(document).ready(function(){
  $('.show1').click(function(){
    $(".row1").slideToggle();
  });

  $('.show2').click(function(){
    $(".row2").slideToggle();
  });

  $('.show3').click(function(){
   $(".row3").slideToggle();
  });
});

Answer 1

我看到的最簡單的方法是向您的所有div添加一個類（如row ），並使用$(".row").not(".rowX").slideUp(); not rowX可以使切換保持活動狀態（通過該更新，順序無關緊要;) ）。

最終會像這樣：

$('.show3').click(function(){
   $(".row").not(".row3").slideUp();
   $(".row3").slideToggle();
});

Answer 2

最簡單的方法是檢查其他div是否正在顯示，如果顯示，則將其關閉。 我僅在下面顯示2個div，但是您可以對div進行數組並為所有這些div遍歷。

這會關閉所有div，然后在打開所有div時，每次單擊都會關閉其余的div。

$("#div1").hide();
$("#div2").hide();

$("#div1Button").click(function () {
   $("#div1").slideToggle();

   if ($("#div2")[0].style.display != "none") {
       $("#div2").slideToggle();
   }
})

$("#div2Button").click(function () {
    $("#div2").slideToggle();

    if ($("#div1")[0].style.display != "none") {
        $("#div1").slideToggle();
    }
})