javascript - 根据屏幕大小折叠 div 元素

Question

我只是想知道如何根据屏幕大小使用 bootstraps手风琴，例如，假设我有一个 div 我想定期显示在所有内容上，但是在移动视图中我希望它折叠。

有什么建议么？

Answer 1

这是使用 Shail 建议的方法的示例，但没有重复布局。预期的行为是在 Bootstrap 3 的响应断点之一 ( screen-md) 处折叠元素。

@media (min-width: @screen-md)
{
    #filters
    {
        display: block;
    }
}

<button type="button" 
        data-toggle="collapse" 
        data-target="#filters" 
        class="visible-xs visible-sm collapsed">Filter</button>

<div id="filters" class="collapse">...</div>

#filters除非应用 css 媒体查询并覆盖类的行为，否则标记是折叠的collapse。

#filters仅当媒体查询不再适用时，展开按钮才可见。

Answer 2

更新：在单击另一个 div 之后，div 不会关闭之前，就像手风琴的工作方式一样。您必须将 panel-group 和 panel 添加到 HTML 中才能正常工作。HTML 已与 CSS 一起更新

有点晚了，但我希望这就是你要找的。我试图做同样的事情，这就是我想出的解决方案。首先，我试图思考导航栏是如何崩溃的。我做了一个名为“div-collapse”的课程。这就像导航栏折叠并使 div 关闭和隐藏，具体取决于您将其放在 css 中的位置。（此示例 div 在小型设备上折叠）

CSS：

#accordion .panel {
  border:none;
  -webkit-box-shadow:none; 
  box-shadow:none;
}

.div-collapse {
  border-top: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.div-collapse {
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .div-collapse.collapse {
   display: block !important;
   height: auto !important;
   overflow: visible !important;
 }

}

的HTML：

<div class="container marketing">
        <hr class="featurette-divider">
        <h2>Heading for some content that you have</h2>
        <div class="row">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
  #1 Example One
                    </button>
                </p>
            </div>
            <div id="collapse1" class="div-collapse collapse col-md-4">
                <h3>Header 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
  #2 Example Two
                    </button>
                </p>
            </div>
            <div id="collapse2"  class="div-collapse collapse col-md-4">
                <h3>Header 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            <div class="panel">
            <div class="col-md-12 visible-xs">
                <p>
                    <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
  #3 Example Three!
                    </button>
                </p>
            </div>
            <div id="collapse3" class="div-collapse collapse col-md-4">
                <h3>Header 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
            </div>
            </div>
            </div>
        </div>

这将为小型设备创建三个按钮，并隐藏 div，直到它们被单击。一旦屏幕比小设备大，按钮将通过引导响应类隐藏。然后 div 将恢复正常的行为。这样，您不必为移动设备和桌面创建两种不同的布局和内容。

JS Fiddle 演示： JS Fiddle 链接

Answer 3

Bootstrap 中有内置的类来帮助你。尝试在您的 div 中使用.visible-phone,.visible-tablet等。

Answer 4

我知道这已被标记为已回答，但也许我的回答将来会对某人有所帮助。

我在我的场景中所做的是在桌面屏幕中使用event.stopPropagation()覆盖引导程序，并通过媒体查询使可折叠框可见。

一个愚蠢的例子（Jsfiddle 例子）：

html:

<div class="data-div" data-toggle="collapse" data-target="#collapseData">
   <div class="row">
      <div class="col-xs-12">
         <b>Always visible data</b>
      </div>
   </div>
   <div class="row collapse" id="collapseData">
      <div class="col-xs-12">
         Mobile hidden data
      </div>
   </div>
</div>

CSS：

@media (min-width: 480px)
{
    #collapseData
    {
        display: block;
    }
}

Javascript：

var MOBILE_WIDTH = 480;
$( document ).ready(function() {
    if ($(window).width() >= MOBILE_WIDTH) {
        $('.data-div').click(function (event) {
            event.stopPropagation();
        });
    }
})

Answer 5

媒体查询是您的朋友。

在您的 CSS 中添加类似的内容（这是针对 iPhone 3-4 + 视网膜）：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /*your css here*/
}

@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /*your css here*/
}

然后在查询中添加 css 来折叠手风琴。

Answer 6

您可以在引导程序中使用响应式实用程序类，查看此页面以获取更多详细信息http://twitter.github.com/bootstrap/scaffolding.html#responsive

就像是

  <div class="visible-phone">accordion</div> 
  <div class="visible-desktop">all data you want to display</div>

Jsfiddle 演示

Answer 7

现有的答案有点过时了。代替visible-[devicename]，您可以使用基于断点的响应类。所以，假设你想要一个盒子，#someid，在sm上面和上面完整显示，并且只能用一个切换按钮折叠xs：

引导程序 3

文档链接：

• hidden-*你用哪里*是断点（xs, sm, md, lg）隐藏东西
• 你用visible-*-**哪里*是断点和**CSS 显示值 ( inline, block, inline-block) 来显示东西。
• 您可以将事物设置为默认仅在某些断点处折叠collapse-*

例如：

<button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="collapse-xs">Some content here</div>

引导程序 4

文档链接：

• hidden-*-up隐藏 at*及以上的元素，例如，hidden-md-up隐藏md(medium desktop) 和lg(large) 断点处的元素。
• hidden-*-down对于和更小是相同的*-hidden-md-down会隐藏除 lg大小之外的所有内容。
• 没有visible-*等价物，您只需确保不要以这些尺寸隐藏它。

例如（注意 V4 仍处于 alpha 阶段，崩溃时似乎有一些变化，所以这可能会改变）：

<button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="hidden-sm-up">Some content here</div>

按钮仅按xs大小显示，可折叠框仅默认隐藏在xs大小以上。

Answer 8

在 Bootstrap-4 中，事情要容易得多：

<div className="container-fluid text-center d-none d-lg-block">
      <div className="row">
        <div className="mx-auto col-lg-2">
          <p className="text-uppercase">products</p>
        </div>
      </div>
    </div>

我们只会在大屏幕上看到“产品”，它会居中（文本中心）并且只占 2 列宽

Answer 9

我在使用 Angular 6 手风琴时遇到了类似的问题，手风琴内的数据表不可见。解决方案是将手风琴包装在一个宽度为 fit-content 样式的 div 中，如下所示

<div style="width:fit-content">
<ngb-accordion [activeIds]="activeAccordians">
  <ngb-panel id="id" title="SUMMARY">
    <ng-template ngbPanelContent>

      <table datatable [dtOptions]="dtOptions" class="row-border hover">
.....
</table
    </ng-template>
  </ngb-panel>
</ngb-accordion>
</div>