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

4 回答

• 11

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

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

  回复于 2024-05-06T07:45:01+08:00
• 7

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

  回复于 2024-05-06T07:45:01+08:00
• 0

  Bootstrap 4手风琴：

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

  回复于 2024-05-06T07:45:01+08:00
• 1

  对于遇到此主题的任何人：截至2017年2月17日，当我遇到此主题时，两个手风琴面板都显示在桌面和移动设备上 . 根据视口大小，“隐藏电话”和“可见电话”类未显示/隐藏 . 我将“hidden-xs”和“visible-xs”添加到包含手风琴 Headers 的相应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

  回复于 2024-05-06T07:45:01+08:00