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以上（元素默认展开时），需要点击两次才能使其保持折叠状态而不重新展开它，然后它就会正常工作。

有何想法？

- Westyfield2

---

可能是重复的问题：如何让手风琴在加载时所有菜单都关闭？ - davidcondrey

Answer 1

只用媒体查询无法实现这种行为，因为Twitter Bootstrap的手风琴需要查找.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());
});

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

- grim