Question

我有一个在移动设备上显示为折叠式手风琴的页脚，而在桌面上，手风琴显示为扩展了所有列表项。它与我正在使用的js一起工作正常。

但是，由于我将我的视口从手机大小扩展到桌面大小，手风琴仍将保持折叠状态。相反，当我将屏幕缩小时，手风琴会像在桌面上那样展开。

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

这是我的页脚bootply。

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

Bootstrap js屏幕尺寸不一致

1 个答案:

BOOTPLY