Bootstrap崩潰-如何添加其他取決於崩潰狀態的點擊行為

Question

我有一個按鈕來控制可折疊div的展開/折疊。 但我想在點擊時添加其他功能，具體取決於div是在擴展還是在崩潰。 我寫了這段代碼：

    buttonElement.click(function() {
      if ($(this).hasClass("collapsed")) {
        // do the thing I want to do when expanding
      } else {
        // do the thing I want to do when collapsing
      }
    })

這可行，但是我想知道它是否健壯。 它假定我的click函數在數據切換更改類之前運行，並且我不確定是否合適。

Answer 1

最好的辦法是閱讀Bootstrap文檔 :)

您的解決方案不是最好的，因為如果您足夠快地雙擊按鈕，它將在if語句和else語句中執行代碼（僅折疊一次）

調用show實例方法時，將立即觸發此事件。

$('#myCollapsible').on('show.bs.collapse', function () {
  // do something…
});

當折疊元素對用戶可見時將觸發此事件（將等待CSS轉換完成）​​。

$('#myCollapsible').on('shown.bs.collapse', function () {
  // do something…
});

調用hide方法后，立即觸發此事件。

$('#myCollapsible').on('hide.bs.collapse', function () {
  // do something…
});

當用戶已隱藏折疊元素時將觸發此事件（將等待CSS轉換完成）​​。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
});

例：

$('[data-toggle="collapse"]').click(function() {
  var collapsibleDiv = $(this).closest('.panel').find('.panel-collapse');
  collapsibleDiv.on('show.bs.collapse', function() {
    $('body').css('background', '#1abc9c');
  });
  collapsibleDiv.on('shown.bs.collapse', function() {
    $('body').css('background', '#e74c3c');
  });
  collapsibleDiv.on('hide.bs.collapse', function() {
    $('body').css('background', '#3498db');
  });
  collapsibleDiv.on('hidden.bs.collapse', function() {
    $('body').css('background', '#7f8c8d');
  });
});

CODEPEN

Answer 2

對於頻繁發生的簡單任務，您的解決方案是最好的。

除了collapsed類之外，您還可以使用特殊屬性 ：

確保將aria-expanded添加到控件元素。 <...>插件將根據可折疊元素是否已打開或關閉來自動切換此屬性。

這兩種方法都指示切換按鈕的狀態，而不指示按鈕所操作的對象的狀態。 當一個對象由幾個按鈕控制時，您需要尋找其他標志。

您可以使用其他三個類來檢查對象本身的狀態：

折疊插件利用一些類來處理繁重的工作：
.collapse隱藏內容
.collapse.in顯示內容
.collapsing在過渡開始時添加，在過渡完成時刪除