仅在移动视图上折叠 DIV - 引导程序 3

Question

我有一个侧边栏搜索参数。我想仅在移动设备上在此DIV上使折叠功能。使用 Bootstrap 3 - 最新版本。

这是 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 -->

我用来为代码提供样式的搜索参数 DIV。

注意：我只想在移动设备上折叠"搜索参数"div，并用按钮打开它。应该只有 1 个div。 我可以隐藏这个div并显示另一个在移动设备上可见的div，但这不是一个好方法。我想折叠这个div并仅在移动设备上的按钮单击上显示它。

Answer 1

你可以

这样做：

<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">
...

.CSS：

#SearchParameters.in,
#SearchParameters.collapsing {
    display: block!important;
}

Answer 2

由于"in"类是将可折叠元素定义为开放的，因此在移动设备上将其删除会导致它开始折叠。

例如

<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>

Answer 3

仅限 CSS 的方法。也适用于 Bootstrap 4。

@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block;
    height: auto !important;
    visibility: visible;
  }
}

<div class="container">
  
  <button class="btn btn-primary hidden visible-xs" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Collapse Button
  </button>
  
  <div class="collapse dont-collapse-sm" id="collapseExample">
    <div class="well">
      Collapse Panel
    </div>
  </div>
</div>

源

Answer 4

为什么不使用 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>

享受！ ;-）

Answer 5

与Rudy的解决方案类似，我发现以下内容非常适合我的需求，适用于Bootstrap 4.6和Razor（Blazor WASM）：

@media (min-width: 641px) {
  .collapse.collapse-show-xs {
      display: block !important;
  }
}

用法：

<div class="collapse collapse-show-xs @NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>

当我升级 Blazorize 的引导程序版本时，我注意到我的侧边栏不再显示。 现在它正在做我想做的事情，那就是它至少在满足 xs 屏幕尺寸时永远不会隐藏，并且在下面时可以隐藏。