javascript - Bootstrap js屏幕尺寸不一致

Question

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

但是，当我扩展我的视口(viewport)从移动尺寸到桌面尺寸时， Accordion 仍将保持折叠状态。相反，当我缩小屏幕时， Accordion 显示会像在桌面上一样展开。

我需要 js 在屏幕尺寸下表现不同，因为它是动态发生的，而不是在我刷新之后。如果我刷新，当然看起来很好。

这是一个bootply用我的页脚。

Answer 1

在调整浏览器大小时，您可以使用此代码在宽度超过 768 像素的屏幕上显示面板(您可以使用 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';
}

BOOTPLY