你如何让 Twitter Bootstrap Accordion 保持一组开放? [英] 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");
})

推荐答案

这里有一个简单的方法:

Here is an easy way to do it:

$('.accordion .btn-link').on('click', function(e) { 
  if (!$(this).hasClass('collapsed')) { 
    e.stopPropagation(); 
  } 
});

来自评论中的@mr_joncollette

from @mr_joncollette in the comments

JsFiddle 用于 Bootstrap 3.

JsFiddle for 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"类，它会停止隐藏过程.

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 Accordion 保持一组开放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！