引导程序在特定断点上折叠

Question

Bootstrap 折叠手风琴上的切换功能只能在较大的分辨率上禁用吗？

目标是在具有切换状态选项的小分辨率上折叠手风琴，并在没有切换状态选项的大分辨率上展开折叠手风琴。使用Bootstrap内置功能来实现此目的的最佳方法是什么？

无论如何要在香草 JS 中执行此操作？

Answer 1

这不是普通的js，但是由于Bootstrap使用jQuery，因此这样做可能更方便。

您可以通过禁用点击事件来实现这一点：

$('a[data-toggle="collapse"]').click(function(e){
if ($(window).width() >= 768) {  
e.stopPropagation();
}    
});

您还需要切换手风琴div 的折叠类：

$(window).resize(function(){
if ($(window).width() >= 768){  
$('.panel-collapse').addClass('in');
}
if ($(window).width() <= 768){  
$('.panel-collapse').removeClass('in');
}
});