默认展开/折叠？

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

思考？

---

您无法仅通过媒体查询来实现此类行为，因为Twitter Bootstrap的Accordion会查找.in类以展开/折叠相应的.accordion-body 。

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

链接地址: http://www.djcxy.com/p/74289.html

上一篇: Default Expand/Collapse?

下一篇: A good way to structure AngularJS client code with Play 2.1 as backend