自举数据只能在小设备上折叠

Question

如何使用Bootstraps折叠功能，以便它仅适用于没有重复代码的移动设备，即我知道如何使用可见类和隐藏类实现它，但我正在寻找更多优雅的解决方案，我不需要复制代码。

目前是以下将应用于所有的屏幕尺寸切换：

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#1" aria-expanded="false" aria-controls="1"> 
     Link with href 
    </a> 

    <div class="collapse" id="1"> 

    </div> 

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#2" aria-expanded="false" aria-controls="2"> 
     Link with href 
    </a> 

    <div class="collapse" id="2"> 

    </div> 

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#3" aria-expanded="false" aria-controls="3"> 
     Link with href 
    </a> 

    <div class="collapse" id="3"> 

    </div> 

Answer 1

您可以根据窗口大小做到这一点。如果它小于767px，则可以使用javascript添加数据切换属性。

演示：https://jsfiddle.net/t1etnj5w/4/

$(document).ready(function(){ 
    console.log($(window).width()); 
    if ($(window).width() < 767) { 
    $('.collapse-div').each(function(){ 
    $(this).attr('data-toggle','collapse'); 
    }) 
} 
    })