Bootstrap折叠手风琴 - 默认展开/折叠？

Question

我正在使用Twitter Bootstrap和jQuery.

根据bootstrap文档,如果您希望可折叠元素作为默认值打开,则添加其他类"in".如果您希望折叠元素作为默认值折叠,则将高度设置为0px.

这一切都运作良好.

我想使用媒体查询在大屏幕上将元素设置为默认值,并在小屏幕上默认折叠(然后单击以在两个屏幕上切换)...

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

我的CSS:

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

这可以正常工作,直到你开始点击它...

低于767px时,元素将默认折叠,并且元素上方默认打开.正确.

低于767px,您可以单击打开元素,它打开正常.再次单击并隐藏它.冲洗并重复.正确.

当您单击以折叠元素时,它超过767px,它会关闭但随后会重新打开.再次单击它,它会关闭并保持关闭状态.再次单击,它打开正常.再次点击它就可以了.

所以由于某种原因,超过767px(当元素默认打开时),它需要两次点击才能使其保持折叠而不重新打开,然后它可以正常工作.

思考？

Answer 1

仅使用媒体查询无法实现这种类型的行为，因为 Twitter Bootstrap 的 Accordion 会寻找.in以展开/折叠相应的.accordion-body.

一个选项是检测页面加载时的窗口宽度，然后添加使用 Bootstrap 的.collapse()方法来显示/隐藏窗口.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());
});

演示： http: //jsfiddle.net/grim/z2tNg/