Bootstrap折疊隱藏在調整大小后

Question

我有以下問題，

在我網站的某些部分中，我正在使用Bootstrap折疊來顯示應該僅在移動設備或768px以下分辨率下才能看到的元素。

我遇到的問題是，如果我在768px以下時切換元素，但沒有關閉它，如果我調整瀏覽器的大小，則該元素仍然可見。

我正在使用$('#collapse').collapse('toggle'); 顯示元素。

因此，當我調整大小時，可以使用.collapse('hide')來隱藏元素（如果已切換）

但是，如果我的分辨率低於768像素，而沒有激活Collapse，並且我將其調整為更大的分辨率，則由於.collapse('hide') ，該元素肯定會切換。

那么，如何確定元素是已切換還是處於活動狀態，以及如何在調整瀏覽器大小時還原該元素？

Answer 1

您可以使用jQuery Visible選擇器，如果該元素可見，則將其設置為隱藏。

if ($('#collapse').is(':visible')) {
    $('#collapse').collapse('hide');
}