트위터 부트 스트랩 : 접을 수있는 요소의 접을 수있는 요소

Question

면책 조항 : 1) 첫 번째 질문은 내가 올바르게하고 싶습니다. 사과하지 않을 경우 사과 드리겠습니다. 2) 영어가 모국어가 아니므로 실수로 인해 유감입니다. 3) 검색을 시도했지만 답변을 찾을 수 없습니다. bootply이 모든 것을 말할 수 있지만 말로 설명하려고

많은 단어를 의미합니다 :

내가 거의이를 제외하고 노력하고자 기본적으로

: 나는 제목 "을 클릭하는 싶습니다 예를 들어 "3"을 클릭하면 ("제목 1"또는 "제목 2"를 클릭 한 후) "첫 번째/두 번째 열"이 숨겨져 "세 번째 열"이 표시됩니다 (그 반대의 경우도 마찬가지입니다). 코스). 나는 이것이 분명히 희망한다. 사전에 어떤 도움 ...하지만 아무것도 달성 할 수

감사 :

나는 (data-parent="#collapse1" 처음 세 개의 버튼이 추가가 http://www.bootply.com/pgoT2IPG8D 이와 같은) 데이터 부모와 함께 몇 가지를 시도!

Answer 1

원하는 것을 얻으려면 실제로`data-parent '를 설정해야 할뿐만 아니라'.panel '클래스도 필요하다는 것을 알아 두십시오. 워드 프로세서이 축소 항목이 표시 될 때 셀렉터가 제공되면

다음 지정된 부모 미만 접힘 요소가 폐쇄 될 것이다. (전통 아코디언 동작과 유사 -이는 패널 클래스에 따라 달라집니다)

데모 :

http://www.bootply.com/qhs4dQbFZK 그래서 당신이 .panel 수업 시간에 당신을 접을 수있는 항목을 포장 (또는 플러그인 변경)해야한다. 참조 : https://github.com/twbs/bootstrap/issues/15341

그런 다음 접을 수있는 항목이 보일 것이다는 다음과 같습니다 :

<div class="panel">   
    <div class="col-md-2 collapse" id="collapse1"> 
     <div class="btn-group-vertical btn-block" data-toggle="buttons"> 
      <button class="btn btn-default btn-lg" href="">First subtitle column</button> 
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button> 
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>  
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button> 
     </div> 
    </div> 
</div> 

귀하의 버튼을 data-parent 속성을 얻어야한다 :

<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button> 

을 그리고 당신의 항목은 ID 세트 내부 포장한다 이전 (#menurow) :

<div class="row" id="menurow"></div> 

.panel 클래스도 다음과 같이 상황에 맞게 처리 (실행 취소)해야하는 스타일 규칙을 설정합니다. .panel {margin-bottom: 0;}