css - Bootstrap 折叠 Accordion - 默认展开/？

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以下可以点击打开元素，可以正常打开。再点一下就隐藏了。冲洗并重复。正确。

当您单击以折叠元素时，超过 767 像素时，它会关闭但随后会自行重新打开。再次单击它，它会关闭并这次保持关闭状态。再次点击，它打开正常。再次单击它会正常关闭。

因此由于某种原因超过 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/