Question

使用Bootstrap 2.3.2我有一个手风琴，单个面板在页面加载时打开。

          <div class="accordion" id="refine">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                  Title
                </a>
              </div>
              <div id="refine-search" class="accordion-body collapse in">
                <div class="accordion-inner">
                  Test text....
                </div>
              </div>
          </div>

该网站完全响应。当切换到移动屏幕尺寸[@media（最大宽度：979px）]时，我希望手风琴面板自动关闭，即有效地我希望div细化搜索线更改为“折叠”。

在移动模式下，手风琴必须仍然有效，例如用户可以点击手风琴标题，面板将展开，因此我不希望重复的div使用.hidden-desktop实用程序类等关闭面板。

我搜索了高低的答案 - 有人可以帮忙吗？

Answer 1

所以我最终想出了如何做到这一点，发布它以防万一对任何人都有帮助。

将HTML更改为：

<div class="accordion" id="refine">

    <div class="hidden-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search</h2></legend>
            </a>
        </div>
    </div>

    <div class="visible-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search (press to reveal)</h2></legend>
            </a>
        </div>
    </div>

    <div id="refine-search" class="accordion-body collapse in">

        <div class="accordion-inner">

            Test text....
        </div>

    </div>

</div>

然后在文件中使用此JS。

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('#refine-search').removeClass('in');
        $('#refine-search').addClass('out');
    } else {
        $('#refine-search').removeClass('out');
        $('#refine-search').addClass('in');
    }
});

Answer 2

对于Bootstrap 3.x，这很好用，但没有更改他们的示例代码：

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('.collapse').removeClass('in');
        $('.collapse').addClass('out');
    } else {
        $('.collapse').removeClass('out');
        $('.collapse').addClass('in');
    }
});

Answer 3

Bootstrap 4手风琴：

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('.collapse').addClass('show');
    } else {
        $('.collapse').removeClass('show');
    }
});

Answer 4

对于遇到此主题的人：截至2017年2月17日，当我遇到此主题时，两个手风琴面板都显示在桌面和移动设备上。根据视口大小，“隐藏电话”和“可见电话”类未显示/隐藏。我将“hidden-xs”和“visible-xs”添加到包含手风琴标题的相应div中，我相信它现在正在按照3年前的预期运行。

正如rtpHarry解释的那样，你不需要添加和删除“out”类，所以我删除了它。除此之外，我没有进行任何额外的编辑。

$(window).bind('resize load', function() {
  if ($(this).width() <= 767) {
    $('#refine-search').removeClass('in');
  } else {
    $('#refine-search').addClass('in');
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="accordion" id="refine">
  <div class="hidden-phone hidden-xs">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
        <legend>
          <h2>Desktop: Refine your search</h2>
        </legend>
      </a>
    </div>
  </div>

  <div class="visible-phone visible-xs">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
        <legend>
          <h2>Mobile: Refine your search (press to reveal)</h2>
        </legend>
      </a>
    </div>
  </div>

  <div id="refine-search" class="accordion-body collapse in">
    <div class="accordion-inner">
      Test text....
    </div>
  </div>
</div>

我的例子：http://www.bootply.com/ZAahtL5zGp

切换到移动屏幕尺寸时自动关闭Bootstrap手风琴面板

4 个答案: