Bootstrap手风琴切换开关

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

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

由于手风琴功能使用设置为“panel-group”div的“data-parent”工作，我尝试更改div的id以禁用手风琴，但实际上并不奏效。

这是面板组股利。（让他们2）Bootstrap手风琴切换开关

<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";     
     } 
}

我想改变数据父母名称将禁用func但是它并不完美。我哪里错了？

来源

2016-09-13 RwitamB

你需要“破坏”崩溃插件，然后重新初始化无父选项..

// 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

来源

2016-09-13 20:12:26 ZimSystem

非常感谢！
完美的工作！ :) – RwitamB

Bootstrap手风琴切换开关

回答

相关问题