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

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