切换到手机屏幕大小时自动关闭Bootstrap手风琴面板 [英] Auto-close Bootstrap accordion panel when switch to mobile screen size

问题描述

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

Using Bootstrap 2.3.2 I have an accordion with a single panel that is open when the page is loaded.

          <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（max-width：979px）]时，我希望手风琴面板自动关闭，即有效地，我希望div细化搜索行更改为折叠。

The site is fully responsive. When switching to a mobile screen size [ @media (max-width: 979px) ] I want the accordion panel to close automatically, i.e. effectively I want the div refine-search line to change to "collapse out".

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

When in mobile mode, the accordion must still work, e.g. the user can click on the accordion heading and the panel will expand hence I do not want duplicate divs to turn the panel off using .hidden-desktop utility classes etc.

I已经在高低处寻找了答案-谁能帮忙？

I've searched high and low for an answer - can anyone help?

推荐答案

所以我最终想出了解决方法，

So I eventually figured out how to do this, posting it in case it's of help to anyone.

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

And then use this JS in the file.

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

这篇关于切换到手机屏幕大小时自动关闭Bootstrap手风琴面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！