javascript - 特定断点处的 Bootstrap 崩溃

Question

是否可以仅在较大的分辨率下禁用 Bootstrap 折叠 Accordion 的切换功能？

目标是让 Accordion 在小分辨率下折叠并带有切换状态的选项，并在大分辨率下展开而没有切换状态的选项。使用 Bootstrap 内置功能来实现这一目标的最佳方式是什么？

无论如何要在 vanilla js 中做到这一点？

Answer 1

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

您可以通过禁用点击事件来实现:

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

您还需要切换 Accordion div 的折叠类:

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