Bootstrap数据切换仅在小型设备上崩溃

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添加data-toggle属性。

演示：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'); 
     })
   }
})

Answer 2

尽管这是一个古老的问题，还是需要再回答。我遇到了这个问题，因为我遇到了类似的问题。我的目标是最大程度地利用引导程序4中的内置功能，并保持引导程序提供的切换功能，以通过单击头部/按钮来打开和关闭可折叠元素。因此，我制定了自己的解决方案，可以帮助其他人搜索响应式折叠元素：

我的方法使用引导程序4中的“ show”类，引导程序用于切换折叠对象的视图。它遵循引导程序的移动优先（即小屏幕优先）原则，并使用引导程序的断点。

在带有引导程序4的html代码中，当默认情况下应显示（打开）折叠元素的class属性时，会将值“ show”附加到该元素的class属性中。代替“ show”，我为从折叠点“ lg”（大屏幕）开始默认显示的折叠元素附加值“ show-lg”。

在Java脚本中，我编写了一个函数，该函数可以在浏览器窗口调整大小的情况下（如果大小大于lg-breakpoint进行测试）。如果是，则将“ show”值附加到具有类属性值“ show-lg”的每个元素。如果不是，它将从该类属性中删除“显示”值。注意：要在每次调整浏览器窗口大小时启用多项操作，重要的是不要替换“ show-lg”值，而只添加/删除“ show”值。

function responsiveCollapseView() {
    let desktopView = $(document).width();
    if(desktopView >= "992"){
        $('.show-lg').addClass('show')
    }
    else {
        $('.show-lg').removeClass('show')
    }
}
$(function() {
    responsiveCollapseView();
    $(window).resize(function () {
        responsiveCollapseView()
    })
});

就我而言，脚本运行良好。在页面加载时，随着浏览器窗口的每次调整大小，它都会使元素的折叠状态适应屏幕大小。在我的情况下，当在移动设备的一栏式布局中的视频和相应文本之间显示时，包含嵌入视频元数据的块会折叠。当布局将lg断点从一列切换到两列时，视频将显示在一列中，其中打开的元数据块在另一列中，旁边是文本。
通过向函数添加其他if子句，我的方法可以轻松地扩展到所有断点。在这种情况下，您应该注意当屏幕超出lg尺寸时，show-md也应打开。