Bootstrap折叠手风琴 - 默认展开/折叠？ [英] Bootstrap Collapse Accordion - Default Expand/Collapse?

问题描述

根据bootstrap文档，如果你想要打开默认的可折叠元素，你可以添加额外的类in 。如果你想把可折叠元素折叠为默认值，你可以将高度设置为0px。

这些效果都很好。

我想使用媒体查询在大屏幕上将元素设置为默认打开，在小屏幕上默认折叠（然后点击以同时切换）...

我的HTML：

 < div class =accordionid =accordion1 
< div class =accordion-group> 
< div class =accordion-heading> 
标题文本。 
< a class =accordion-toggledata-toggle =collapsehref =＃collapseOne> 
（点击显示/隐藏）
< / a> 
< / div> 
< div id =collapseOneclass =accordion-body collapse> 
< div class =accordion-inner> 
 Lorem ipsum。 
< / div> 
< / div> 
< / div> 
< / div> 
  

我的CSS：

  @media（min-width：768px）{
 .collapse {
 height：auto; 
} 
} 
 @media（max-width：767px）{
 .collapse {
 height：0px; 
} 
} 
  

p>

在767px之下，元素被折叠为默认，并且元素上方默认为打开。正确。

在767px以下，您可以点击打开元素，它打开正常。再次点击它隐藏。冲洗并重复。正确。

当您点击折叠元素时，它会关闭，但会重新打开。再次点击它，它关闭，并保持关闭这一次。再次点击它打开正常。

因此，由于某种原因，高于767px（当元素默认打开时），它需要两次点击，

解决方案

你不能实现这种类型的行为只有媒体查询作为Twitter Bootstrap的手风琴寻找 .in 类，以展开/折叠相应的 .accordion-body 。

一个选项是在页面加载时检测窗口宽度，然后添加使用Bootstrap的 .collapse（）方法显示/隐藏 .accordion- body 。

  $（function（）{
 $（window）.resize（function（）{//可选：如果要检测窗口是否调整大小; 
 processBodies（$（window）.width（））; 
}）; 
 function processBodies（width）{
 if（width> 768）{
 $ -body'）。collapse（'show'）; 
} 
 else {
 $（'。accordion-body'）。collapse（'hide'）; 
} 
} 
 processBodies（$（window）.width（））; 
}）; 
  

DEMO： http://jsfiddle.net/grim/z2tNg/

I'm using Twitter Bootstrap, with jQuery.

According to the bootstrap docs, if you want the collapsible element open as default you add the additional class "in". And if you want the collapsible element collapsed as default you style the height to 0px.

That all works well and good.

I would like to use a Media Query to set the element open as default on large screens, and collapsed as default on small screens (and then click to toggle on both)...

My HTML:

<div class="accordion" id="accordion1">
 <div class="accordion-group">
  <div class="accordion-heading">
   Heading text.
   <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
    (Click to show/hide)
   </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse">
   <div class="accordion-inner">
    Lorem ipsum.
   </div>
  </div>
 </div>
</div>

My CSS:

@media (min-width: 768px) {
    .collapse {
        height: auto;
    }
}
@media (max-width: 767px) {
    .collapse {
        height: 0px;
    }
}

This works fine until you start clicking it…

Below 767px the element is collapsed as default, and above the element is open as default. Correct.

Below 767px you can click to open the element, and it opens fine. Click again and it hides. Rinse and repeat. Correct.

Above 767px when you click to collapse the element, it closes but then re-opens itself. Click it again and it closes and stays closed this time. Click again and it opens fine. Click again and it closes fine.

So for some reason above 767px (when the element is open as default), it takes two clicks to make it stay collapsed without re-opening itself, and then it works fine.

Thoughts?

解决方案

You can't achieve this type of behavior only with Media Queries as Twitter Bootstrap's Accordion looks for the .in class in order to expand/collapse the respective .accordion-body.

An option is to detect the window width on page load and then add the use Bootstrap's .collapse() method to show/hide the .accordion-body.

$(function(){
    $(window).resize(function() {    // Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});

DEMO: http://jsfiddle.net/grim/z2tNg/

这篇关于Bootstrap折叠手风琴 - 默认展开/折叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！