2013-04-22 2 views
49

bootstrap 템플릿을 사용 중이고 accordion이 기본적으로 작동하는 방식을 변경하고 싶습니다.부트 스트랩이 처음 접힌 요소

로드가 발생하면 페이지를 처음 볼 때 토글을 닫을 수 있습니까? 당신이 확장하거나 그냥 "의"/ 클래스를 제거 추가하고 아코디언 DIV에 height:auto 또는 0을 설정 아코디언을 축소 할 때

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div id="collapseOne" class="accordion-body collapse in"> 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 
+1

처음에는 아코디언을 무너 뜨리는 것이 좋지 않습니까? – PSL

+2

예, 페이지로드가 닫히기를 원합니다. – JoshuaJeanThree

+6

확인. "in"을 제거하면됩니다. 대답을 참조하십시오 ... – PSL

답변

77

"의 붕괴"에서 "의"제거해야합니다. Demo

그래서 아코디언에서 당신은 그냥 아래로 사업부에서 클래스 "에서"제거 정의 할 때. accorion을 확장 할 때마다 "in"클래스가 추가되어 표시됩니다.

"in"부트 스트랩이있는 페이지를 렌더링하면 클래스를 찾고 div의 높이를 자동으로 만듭니다.없는 경우 높이가 0입니다.

<div id="collapseOne" class="accordion-body collapse"> 
11

다른 해결책이 붕괴 대상 거짓 전환을 = 추가하는 것입니다, 이것은 무작위로 열고 방금

예를 들어

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div 
    id="collapseOne" 
    class="accordion-body collapse" 
    data-toggle="false" 
    > 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 
+2

이것은 많은 도움이되었습니다. 먼저 div를 표시하고 토글을 사용하여 숨겨야합니다. 그러나 data-toggle = "false"가 없으면 처음에는 div가 바뀌 었습니다 (이미 보이기 때문에 바보 같이 보였습니다). 그런 다음 두 번째 토글에서 시작하여 예상대로 작동합니다. –

+1

또한 내 문제를 해결했습니다. 내 div (버튼 포함) 처음 붕괴되었고 이상하게 다시 위의 형태로 아무것도 처음 두 번 표시하고 숨길 것입니다 ... –

+1

고마워! 이것은 내 문제를 해결했다. 나는 처음부터 '안에'을 가지지 않았고, 처음에는 여전히 확장되어있었습니다. data-toggle = "false"를 추가하면 문제가 해결되었습니다. –

-2

"에서"제거하면 어떻게됩니까 폐쇄 중지됩니다 제 경우와 같이 in 클래스를 제거해도 문제가 해결되지 않으면 CSS 표시 속성을 사용하여 축소 된 초기 상태를 강제로 적용 할 수 있습니다.

+1

부트 스트랩이 오해 받고 있다는 것을 알기에 이상한 ... –

+0

@VishalKumarSahu 때로는 코드가 구현되는 컨텍스트를 제어 할 수 없으며 때로는 클라이언트가 코드를 재 코딩하거나 디버깅하기 위해 비용을 지불하지 않는 경우가 있습니다. 당신은 적응해야합니다. –

관련 문제