bootstrap collapse on specific break points

Question

Can the toggle functionality on Bootstrap collapse accordion be disabled only on larger resolutions?

The goal is to have the accordion collapsed on small resolutions with the option to toggle states, and expanded on large resolutions with no option to toggle states. What would be the best way to use Bootstrap built in functionality to achieve this?

anyway to do this in vanilla js?

Answer 1

这不是vanilla js，但是当Bootstrap使用jQuery时，这样做可能更方便。

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

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

您还需要切换折叠式divs的折叠类：

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