您如何使Twitter Bootstrap手风琴保持开放状态？ [英] How do you make Twitter Bootstrap Accordion keep one group open?

问题描述

我正在尝试使用Twitter引导程序通过手风琴和折叠插件来模拟Outlook栏，到目前为止，我已经使折叠和手风琴正常工作，但是目前它允许所有部分都折叠。

I am trying to mimic the Outlook bar using Twitter bootstrap using the accordion and collapse plugin, so far I got the collapse and accordion working, but it presently allows for all sections to be collapsed.

我想限制它，以便始终只显示一个。

I would like to limit it so that one and only one is always shown.

这是我正在研究的一个： http://jsfiddle.net/trajano/SMT9D/ ，我认为它与

Here is the one I am working on: http://jsfiddle.net/trajano/SMT9D/ and I think it's somewhere along the lines of

$('#accordions').on('hide', function (event) {
  console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})

推荐答案

这是一种简单的方法：

JsFiddle 适用于Bootstrap 3。

JsFiddle for Bootstrap 3.

引导程序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类，则它将停止隐藏过程。

The code checks if the clicked element is the one that is currently shown (by the class "in") and if it does have the "in" class, it stops the hiding process.

JsFiddle 表示Bootstrap 2。

JsFiddle for 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（）会阻止在检查之后发生的事件。

---

Note: Be careful if you want to attach more click events on the accordion, since the e.stopPropagation() will block events that would occur after the check.

这篇关于您如何使Twitter Bootstrap手风琴保持开放状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！