Question

我的网页上写了一个Bootstrap手风琴，效果非常好。我想使用Bootstrap Toggle（http://www.bootstraptoggle.com）编写一些附加功能。

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

由于手风琴功能使用＆＃34;数据 - 父级＆＃34;设置为＆＃34; panel-group＆＃34; div，我尝试更改div的id以禁用手风琴，但它并没有真正起作用。

这是小组的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";                
        }
}

我认为更改数据 - 父名称将禁用该功能，但它不是很有用。我哪里错了？

Answer 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

Bootstrap Accordion Toggle On Off

1 个答案: