twitter-bootstrap – 你如何让Twitter Bootstrap手风琴保持一个

发布时间：2020-12-18 00:02:28 所属栏目：安全来源：网络整理

导读：我试图使用手风琴和折叠插件使用Twitter引导模拟Outlook栏，到目前为止我得到了折叠和手风琴工作，但目前允许所有部分折叠。我想限制它，以便一个只有一个总是显示。这里是我正在工作的一个：http://jsfiddle.net/trajano/SMT9D/，我认为它在某处沿线 $('#

我试图使用手风琴和折叠插件使用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

Bootstrap 3的JsFiddle。

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()将阻止在检查后发生的事件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!