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

查看：26
本文介绍了切换到移动屏幕大小时自动关闭 Bootstrap 手风琴面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 
<div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">标题</a>
<div id="refine-search" class="accordion-body 折叠在"><div class="accordion-inner">测试文本....

该网站完全响应.切换到移动屏幕尺寸 [@media (max-width: 979px)] 时，我希望手风琴面板自动关闭，即实际上我希望 div 优化搜索行更改为折叠".

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

我在高低处寻找答案 - 有谁能帮忙吗?

解决方案

所以我最终想出了如何做到这一点，将其发布，以防对任何人有帮助.

将 HTML 更改为:

<div class="隐藏电话"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"><传说><h2>优化您的搜索</h2></legend></a>

<div class="visible-phone"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"><传说><h2>优化您的搜索(按下即可显示)</h2></legend></a>

<div id="refine-search" class="accordion-body 折叠在"><div class="accordion-inner">测试文本....

然后在文件中使用这个JS.

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

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>

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

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

Alter the HTML to:

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆