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手風琴切換開關

回答

相關問題