引导 js 屏幕大小不一致

Question

我有一个页脚，在移动设备上显示为折叠的手风琴，而在桌面上，手风琴显示为展开的所有列表项。它适用于我正在使用的 js。

但是，当我将视口从移动大小扩展到桌面大小时，手风琴仍将保持折叠状态。相反，当我使屏幕变小时，手风琴显示会像在桌面上一样扩展。

我需要 js 的行为与屏幕尺寸不同，因为它正在动态发生，而不仅仅是在我刷新后。如果我刷新，当然看起来不错。

这是我的页脚的靴子。

Answer 1

在调整浏览器大小期间，您可以使用此代码在宽度超过 768px 的屏幕上显示面板（您可以使用 else 语句在较小的尺寸上隐藏它们）。

$(window).resize(function () {
  if($(this).width() > 768) {
    $('.panel-collapse').collapse('show');
  } else {
    $('.panel-collapse').collapse('hide');
  }
});
$(window).trigger('resize');
$('.footer-panels [data-toggle=collapse]').click(function(e) {
  if($(window).width() > 768) {  
    e.preventDefault();
    e.stopPropagation();
  }    
});

加/减按钮 CSS：

.footer-panels [data-toggle=collapse] span:before {
  content: 'f068';
}
.footer-panels [data-toggle=collapse].collapsed span:before {
  content: 'f067';
}

引导