부트 스트랩 아코디언 - 드롭 다운을 사용할 때 단 하나의 패널을 열어 두는 방법은 무엇입니까?

Question

이 정확한 문제를 해결 한 항목을 찾을 수 없습니다. 그것은 충분히 단순 해 보이지만 나는 그것을 작동시킬 수 없었습니다.

기본적으로 나는 단지 텍스트의 패널을 확장하기 위해 일련의 버튼을 누르는 대신 하나의 드롭 다운에서 옵션을 선택하기를 원한다는 점을 제외하고는 일반적인 아코디언을 원합니다. 난 이미 그 일을했지만 지금은 데이터 - 부모 속성을 적용하는 방법을 알아낼 수 없으므로 한 번에 하나의 패널 만 열립니다.

정상적인 아코디언 코드를 사용하여 내 드롭 다운에 동일한 개념을 적용하려고했지만 구조가 다르기 때문에 관련 코드를 복사하여 붙여 넣을 수없고 잘 처리 할 수 ​​없다는 것을 의미합니다. 데이터 부모가 아코디언을 사용하는 방법에 대한 세부 정보.

이것은 내가 지금까지 무엇을 가지고 :

<div class="container"> 
 
    <div class="col-md-12"> 
 

 
    <div class="col-md-3"></div> 
 

 
    <div class="panel-group col-md-6 text-center" id="accordion"> 
 

 
     <div class="col-md-12 text-center"> 
 

 
     <div class="dropdown btn-group"> 
 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section 
 
      <span class="caret"></span> 
 
      </button> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li> 
 
      <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li> 
 
      <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li> 
 
      </ul> 
 
     </div> 
 

 
     </div> 
 

 
     <div id="collapse1" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Text A 
 
     </div> 
 
     </div> 
 

 
     <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Text B 
 
     </div> 
 
     </div> 
 

 
     <div id="collapse3" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     Text C 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <div class="col-md-3"></div> 
 
    </div> 
 
</div>

가 (필자는 div를 올바르게 중첩 된 희망 ... 나는 그들이 생각하지만, 시간에 따라 어려운 ...)

볼 수 있듯이 id가 "accordion"인 div의 내부입니다. 드롭 다운 선택 항목이 열리고 그 아래의 텍스트 섹션이 제대로 닫힙니다. 그러나 데이터 부모가 "#accordion"으로 설정되어 있어도 수동으로 닫지 않으면 닫히지 않습니다. 텍스트 블록의 div에 데이터 부모를 넣으려고했으나 그 중 하나가 작동하지 않았습니다. 그것은 정상적으로 작동하는 아코디언과 매우 유사하게 보였지만 다르게 그룹화되었습니다. 분명히 별도의 버튼 대신 드롭 다운을 사용할 때가되었습니다.

div를 약간 재구성하거나 id 또는 data-parent를 움직이는 문제가 있다고 가정합니다. 그러나 어떤 진전을 이루지 못했습니다. 커스텀 자바 스크립트가 작동하지 않는 한? 이 버튼의 일련의 대신 드롭 다운을 사용하여 아주 작은 변화처럼 보였다,하지만 어쩌면 그것은

Answer 1

이 여기에 내 대답과 비슷합니다 ... 그것은 것보다 더 복잡 : https://stackoverflow.com/a/19426220/171456이

아코디언 동작은 따라 달라집니다 panel 클래스에 있고 패널은 data-parent 요소의 직접 하위이어야합니다. 같을 것이다 시나리오에이 규칙을 적용

는 ... 별도의 노트에

http://www.codeply.com/go/cPGVLuAh4j

<div class="panel-group row text-center"> 
      <div class="col-md-12 text-center" id="accordion"> 
       <div class="panel"> 
        <div class="dropdown btn-group"> 
         <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a Section 
          <span class="caret"></span> 
         </button> 

         <ul class="dropdown-menu"> 
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Section A</a></li> 
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Section B</a></li> 
          <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Section C</a></li> 
         </ul> 
        </div> 

        <div id="collapse1" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          Text A 
         </div> 
        </div> 

        <div id="collapse2" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          Text B 
         </div> 
        </div> 

        <div id="collapse3" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          Text C 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

, 부트 스트랩 그리드에 col-* 항상 row의 직접적인 자이어야한다.