부트 스트랩 초기 축소 요소

부트 스트랩 초기 축소 요소

---

부트 스트랩 템플릿을 사용하고 있으며 기본적으로 아코디언이 작동 하는 방식을 변경하고 싶습니다 .

페이지가 처음 표시 될 때 (로드시) 토글을 닫으려면 어떻게해야합니까?

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

---

당신이 확장 또는 축소 아코디언은 그냥 추가하면 / "의"클래스를 제거하고를 설정 height:auto또는 0아코디언 DIV합니다.

Demo

따라서 아코디언에서 정의 할 때 아래와 같이 div에서 "in"클래스를 제거하십시오. 아코 리온을 확장 할 때마다 "in"클래스를 추가하여 표시합니다.

"in"부트 스트랩을 사용하여 페이지를 렌더링하면 클래스를 찾고 div의 height : auto가됩니다. 존재하지 않으면 높이가 0이됩니다.

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

---

"접기"에서 "in"을 제거해야합니다.

---

또 다른 해결책은 축소 대상에 toggle = false를 추가하는 것입니다. 이렇게하면 "in"을 제거하면 발생하는 임의의 열기 및 닫기가 중지됩니다.

예 :

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

---

접는 요소의 클래스에 "show"클래스를 추가하기 만하면 부트 스트랩은 js를 동적으로 사용하여 축소하고 표시합니다.

---

방금 "card-body"앞에 div에 class hide를 추가했으며 기본적으로 숨겨져 있습니다.

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

---

수업에서 프로그램 을 삭제해야합니다 .

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

그것은이어야합니다

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">

---

제 경우 in처럼 클래스를 제거해도 효과 가 없으면 CSS 표시 속성을 사용하여 축소 된 초기 상태를 강제로 적용 할 수 있습니다.

...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...

참고 URL : https://stackoverflow.com/questions/16149923/bootstrap-initially-collapsed-element