부트 스트랩 아코디언 토글 켜기 끄기

Question

저는 웹 페이지에 부트 스트랩 아코디언이 기록되어 있습니다. 정상적으로 작동합니다. 부트 스트랩 토글 (http://www.bootstraptoggle.com)을 사용하여 몇 가지 추가 기능을 작성하려고했습니다.

주요 아이디어는 확인란에 체크 표시가 있으면 아코디언 기능이 작동하고 (한 번에 하나의 패널 만 열림) 확인란이 선택 취소 된 경우 한 번에 여러 패널을 열 수 있다는 것입니다.

"panel-group"div에 설정된 "data-parent"를 사용하여 accordion 기능이 작동하기 때문에 div의 ID를 변경하여 아코디언을 사용하지 않도록 설정했지만 실제로 작동하지 않습니다.

이 패널 그룹의 사업부이다. 이것은 내 체크 박스

에 대한 onchange를() 이벤트에 JS 코드

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

을 (그 중 2 되세요)

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