Bootstrap折叠 - 全部展开

我已经实现了Bootstrap 3折叠。当任何一个标题链接被点击时，客户希望所有的目标块都展开。我试图实现this answer的修改版本，但无法使其工作。Bootstrap折叠 - 全部展开

如何让所有目标块在点击其中任何一个时展开/折叠？

这是标记：

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h6 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{entry_id}">{title}</a></h6> 
     </div> 
    </div> 
    <div id="collapse{entry_id}" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     {technology_body} 
     </div> 
    </div> 
</div>

这是JS我已经尝试：

$('#accordion').on('click', function() { 
    if($('.collapse:not(.in)')) { 
     $.collapse("toggle"); 
    } 
});

来源

2014-02-27 pedalGeoff

JSFiddle示例？ –

我一些帮助下线在这个问题上了。使用的脚本是

$('#accordion .panel-default').on('click', function() { 
    $('#accordion .panel-collapse').collapse('toggle'); 
});

，这是的jsfiddle例如http://jsfiddle.net/gtowle/Vq6gt/1/

来源

2014-03-03 23:10:22 pedalGeoff

这会切换可折叠元素的状态。如果我们扩展了元素并且我想扩展所有元素，那么它会崩溃扩展元素并扩展其他元素。任何想法来解决这个问题？ – jagmohan

@jagmohan要解决您的问题，只需使用'show'或'hide'而不是'toggle'作为collapse（）函数的参数，如[docs]（http://getbootstrap.com/javascript/#collapse）。 –

谢谢菲利普。我能够弄清楚。 – jagmohan

想通了。当你想折叠你的元素 - 你需要指定内容 div的#accordion，你的情况（也是我的）类是.collapse。

$('#accordion .collapse').collapse('show');

来源

2014-12-03 14:50:25

谢谢。这工作完美。 –

Bootstrap折叠 - 全部展开

回答

相关问题