特定のブレークポイントでのブートストラップコラプス

Question

ブートストラップコラプスアコーディオンのトグル機能は、より大きな解像度でのみ無効にできますか？

目標は、状態を切り替えるオプションを使用して小さな解像度で折り畳まれ、状態を切り替えるオプションなしで大きな解像度に展開されるようにすることです。ブートストラップを使用してこれを実現するには、何が最善の方法でしょうか？

とにかくこれを行うには、vanilla js？

Answer 1

これはvanilla 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'); 
    } 
}); 

あなたは、クリックイベントを無効にすることでそれを達成することができます