Bootstrap 手风琴开关答案

【问题标题】：Bootstrap Accordion Toggle On OffBootstrap 手风琴开关
【发布时间】：2017-01-21 11:55:45
【问题描述】：

我的网页上有一个 Bootstrap 手风琴，它工作得非常好。我想编写一些附加功能，使用 Bootstrap Toggle (http://www.bootstraptoggle.com)。

主要思想是，当勾选复选框时，手风琴功能将起作用（一次只打开一个面板），当复选框未选中时，我们可以一次打开多个面板。

由于手风琴功能使用设置为“面板组”div的“数据父级”工作，我尝试更改div 禁用手风琴，但它并没有真正起作用。

这是面板组的 div。（有 2 个）

<div name="panel1" class="panel-group" id="blah">

复选框

<div align="center" class="checkbox">
    <input onchange="setClass(this)" id="collapse-logic" type="checkbox" data-toggle="toggle" data-on="Shrink On" data-off="Shrink Off">
</div>

这是我的复选框的 onchange() 事件的 JS 代码

function setClass(elem){
        if(elem.checked){
            document.getElementsByName("panel1")[0].id="accordion";
            document.getElementsByName("panel2")[0].id="accordion2";                
        }
        else{
            document.getElementsByName("panel1")[0].id="blah";
            document.getElementsByName("panel2")[0].id="blah2";                
        }
}

我认为更改数据父名称会禁用该功能，但它并不完全有效。我哪里错了？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您需要“销毁”折叠插件，然后在没有父选项的情况下重新初始化..

   // multi mode
   $('.panel-collapse').removeData('bs.collapse'); // destroy collapse
   $('.panel-collapse').collapse({parent:false});

   // single accordion mode
   $('.panel-collapse').removeData('bs.collapse'); // destroy collapse
   $('.panel-collapse').collapse({parent:'#accordion'});

Codeply Demo

【讨论】：