引导数据切换仅在小型设备上折叠答案

【问题标题】：Bootstrap data toggle collapse only on small device引导数据切换仅在小型设备上折叠
【发布时间】：2016-02-02 04:14:09
【问题描述】：

您如何使用 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>

【问题讨论】：

标签： jquery css twitter-bootstrap collapse

【解决方案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'); 
     })
   }
})

【讨论】：

【解决方案2】：

虽然这是一个老问题，但我遇到了这个问题，因为我遇到了类似的问题。也许我让 bootstrap 4 可折叠元素响应的解决方案对某人有帮助。

设计原则：

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

使用方法：

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

它的作用：

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

    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()
        })
    });

玩得开心

【讨论】：