Question

如何使用Bootstraps折叠功能，使其仅适用于没有重复代码的移动设备，即我知道如何使用可见和隐藏类来实现它，但我正在寻找一个更优雅的解决方案，我不会＃ 39; t必须复制代码。

目前以下内容将适用于所有屏幕尺寸的切换：

 <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

尽管这是一个古老的问题，但我遇到了这个问题，因为我遇到了类似的问题。也许我使Bootstrap 4可折叠元素响应的解决方案对某人很有帮助。

设计原则：

我的方法遵循引导程序的移动优先（即小屏幕优先）的原则，并使用引导程序的断点。
它使用引导程序4中的“ show”类，引导程序默认使用要扩展的折叠对象的切换值。每次用户手动切换视图时，哪个引导程序4都会更改。
我的代码为class属性添加了响应值“ show- *”，其中*代表引导程序标准断点sm，md，lg，xl。

使用方法：

构建常规的bootstrap 4 html代码。在您将“ show”值默认设置为可折叠的元素以显示的地方，展开位置而不是负责的“ show- *”值之一。
在您的javascript代码中包含下面的jquery代码片段。

它的作用：

默认情况下，可折叠元素将在小屏幕上显示为折叠状态，直到指定的断点为止。
调整浏览器窗口大小将调用文档宽度的新测试，并将“显示”效果调整为新宽度。
仍然可以由用户手动切换。但是，任何调整大小都会将可折叠元素再次强制为其响应的默认值。

    function responsiveCollapseView() {
        let desktopView = $(document).width();
        if(desktopView >= "1200"){
            $('.show-xl, .show-lg, .show-md, .show-sm').addClass('show')
        }
        else if(desktopView >= "992"){
            $('.show-lg, .show-md, .show-sm').addClass('show')
            $('.show-xl').removeClass('show')
        }
        else if(desktopView >= "768"){
            $('.show-md, .show-sm').addClass('show')
            $('.show-lg, .show-xl').removeClass('show')
        }
        else if(desktopView >= "576"){
            $('.show-sm').addClass('show')
            $('.show-xl, .show-lg, .show-md').removeClass('show')
        }
        else {
            $('.show-xl, .show-lg, .show-md, .show-sm').removeClass('show')
        }
    }
    $(function() {
        responsiveCollapseView();
        $(window).resize(function () {
            responsiveCollapseView()
        })
    });

玩得开心

Bootstrap数据切换仅在小型设备上折叠

2 个答案: