Bootstrap 引导程序折叠折叠面板-默认展开/？

lnvxswe2 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(384)

我用的是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以上的元素时，它会关闭，但随后会重新打开。再次单击它，它会关闭并保持关闭状态。再次单击它，它会正常打开。再次单击它，它会正常关闭。
因此，由于某些原因，在767px以上（当元素默认打开时），需要两次单击才能使其保持折叠状态，而无需重新打开自身，然后它就可以正常工作了。
有什么想法？

twitter-bootstrap

来源：https://stackoverflow.com/questions/18826362/bootstrap-collapse-accordion-default-expand

1条答案

按热度按时间

eqfvzcg81#

您无法仅通过Media Queries实现这种类型的行为，因为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/

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导程序折叠折叠面板-默认展开/？

1条答案

相关问题

热门标签

最新问答