你如何使Twitter Bootstrap手风琴保持开放？
我试图模仿使用Twitter引导使用手风琴和崩溃插件的Outlook栏，到目前为止，我得到了崩溃和手风琴的工作，但它目前允许所有部分被折叠。
我想限制它，只有一个总是显示。
这是我正在工作的一个： http : //jsfiddle.net/trajano/SMT9D/我认为这是沿线的某处
$('#accordions').on('hide', function (event) { console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop"); }) 这是一个简单的方法来做到这一点：
新引导3
JsFiddle Bootstrap 3。
Bootstrap代码3：
$('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); });
代码检查被单击的元素是否是当前显示的元素（由“in”类） ，如果它具有“in”类，则停止隐藏过程。
弃用Bootstrap 2
JsFiddle Bootstrap 2。
Bootstrap 2的代码：
$('.accordion-toggle').on('click',function(e){ if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); });
注意： 如果你想在手风琴上附加更多的点击事件，要小心，因为e.stopPropagation()会阻止检查后发生的事件。
我想要精确@Hugo Dozois的回答
你应该添加e.preventDefault(); 如果您的页面中有滚动条，则可以防止＃HTML定位点的默认行为
$('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.preventDefault(); e.stopPropagation(); } });
或者你可以使用简单的CSS技巧如下：
/* prevent the active panel from collapsing */ .panel-group [aria-expanded=true]{ /* http://caniuse.com/#feat=pointer-events Works for MOST modern browsers. (- Opera Mobile) */ pointer-events: none; }
必须在不活动的面板链接上有适当的标签
aria-expanded="false"
按照bootstarp 3.3.6版本， 只要按照结构
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> collopse 1 body here </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> collapse body 2 </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
