Twitter bootstrap 仅在移动视图上折叠DIV-引导3

我有一个侧边栏搜索参数。我想在这个DIV上只在移动设备上实现折叠功能。使用Bootstrap3-最新版本

这是HTML标记

<div class="col-md-3 col-sm-4 SearchParameters">
            <h4 data-toggle="collapse" data-target="#search">Location</h4>
            <div class="col-md-12 sCheck no-gutter collapse" id="search">
                <h5>Lahore (254)</h5>
                <div class="col-md-12">
                    <form role="form">
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="ModelTown">
                            <label for="ModelTown">Model Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="DHA">
                            <label for="DHA">DHA</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="CG">
                            <label for="CG">Cavalry Ground</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Gulberg">
                            <label for="Gulberg">Gulberg</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Samnabad">
                            <label for="Samnabad">Samnabad</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="AIT">
                            <label for="AIT">Allama Iqbal Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="GardenTown">
                            <label for="GardenTown">Garden Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Township">
                            <label for="Township">Township</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="FaisalTown">
                            <label for="FaisalTown">Faisal Town</label>
                        </div>
                        <a href="#">20 more locations</a>
                    </form>
                </div><!-- form-group -->
                <div class="clearfix"></div>
                <h5 class="second">Availability</h5>

                <div class="col-md-12 SelectDays">
                    <a href="#" class="Day">M</a>
                    <a href="#" class="Day">T</a>
                    <a href="#" class="Day active">W</a>
                    <a href="#" class="Day">Th</a>
                    <a href="#" class="Day">F</a>
                    <a href="#" class="Day">S</a>
                    <a href="#" class="Day">SU</a>
                </div><!-- SelectDays -->

                <div class="col-md-12 TimeSet">
                    <!-- timeFunction -->
                </div><!-- TimeSet -->

            </div><!-- col-md-12 -->
        </div><!-- SearchParameters -->

位置
拉合尔（254）
模范城镇
二十二碳六烯酸
骑兵场
古尔伯格
桑纳巴德
阿拉玛伊克巴尔镇
花园镇
乡镇
费萨尔镇
可利用性

SearchParameters DIV用于为代码提供样式

---

注意：我只想在手机上折叠“SearchParameters”div，并用按钮打开它。。应该只有一个div。我可以隐藏这个div并显示另一个在移动设备上可见的div，但这不是一个好方法。我想折叠此div并在移动设备上单击按钮显示它。

您可以这样做：

<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button>

<div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters">
...

因为“in”类将可折叠元素定义为open，所以在mobile上移除它会导致它开始折叠

例如

显示/隐藏
内容在这里。
如果（$（“#xs检查”）。是（“：可见”））
$（“#可折叠”）.removeClass（“in”）；

为什么不使用window.matchMedia

为了简单起见，我创建了一个基于Andrew Dinmore的示例它不需要额外的空div来检查某些内容是否可见

<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button>

<div id="Foo" class="collapse in">
  <!-- fancy content here -->
</div>

<script type="text/javascript">
    $(document).ready(function () {
      if (matchMedia) {
        var mq = window.matchMedia("(max-width: 768px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
      }

      function WidthChange(mq) {
        if (mq.matches) {
          $("#Foo").removeClass("in");
        }
      }
    });
  </script>

切换
$（文档）.ready（函数（）{
如果（匹配媒体）{
var mq=window.matchMedia（（最大宽度：768px））；
mq.addListener（WidthChange）；
宽度变化（mq）；
}
函数宽度更改（mq）{
if（mq.matches）{
$（“#Foo”）.removeClass（“in”）；
}
}
});

---

享受！；-）

CSS-only方法。也适用于引导4

@介质（最小宽度：768px）{
。崩溃。不要崩溃{
显示：块；
高度：自动！重要；
能见度：可见；
}
}

折叠按钮
折叠面板

要隐藏

div

？我只想在mobile上折叠“SearchParameters”div，并用按钮打开它。此解决方案在Bootstrap 3.3.5中不起作用，使用

隐藏xs

意味着折叠区域不会在任何时候扩展all@Rudicss修复了它！工作这对我来说效果很好，但我发现如果我在XS处单击以折叠然后取消折叠，然后更改XS上方的屏幕宽度使其不可见，因此我添加了一个媒体查询，以强制它在断点上方始终可见，例如

@media screen和（最小宽度：768px）{#SearchParameters{显示：块！重要；可见性：可见！重要；}

Clean solution。我使用了Rudi的答案和johna的附录，这是一个很好的衡量标准。请注意，如果有人感兴趣，我通常会检查元素可见性，而不是使用matchMedia。第一个原因，虽然现在几乎完全不相关，但它当然没有问题比如说，使用matchMedia；这实际上是一种技术上更有效的方法。但是，如果构建过程没有设置为共享断点值，我不认为需要担心额外的两个字节，当然不会担心这些天平均页面所需的数据量。我选择了ot我使用了这个方法，但使用了默认的引导javascript：

if（$（“#可见检查”）.is（“：visible”）{$（“#可折叠”）.collapse（'show'）；}else{$（“#可折叠”）.collapse（'hide'）}

好处是添加和删除的类是自动的。谢谢你，我不知道这个函数存在，它看起来确实比手动添加类更好。

<button data-toggle="collapse" data-target="#collapsible">Show/Hide</button>
<div class="collapse in" id="collapsible">
    Content Here.
</div>
<div class="visible-xs" id="xs-check"></div>
<script>
if( $("#xs-check").is(":visible") )
    $("#collapsible").removeClass("in");
</script>

<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button>

<div id="Foo" class="collapse in">
  <!-- fancy content here -->
</div>

<script type="text/javascript">
    $(document).ready(function () {
      if (matchMedia) {
        var mq = window.matchMedia("(max-width: 768px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
      }

      function WidthChange(mq) {
        if (mq.matches) {
          $("#Foo").removeClass("in");
        }
      }
    });
  </script>