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');
}