모든 메뉴가 닫힌 상태에서 아코디언을로드하려면 어떻게해야합니까?

모든 메뉴가 닫힌 상태에서 아코디언을로드하려면 어떻게해야합니까?

---

나는 여기의 예를 따르려고 노력하고 있습니다

http://twitter.github.com/bootstrap/javascript.html#collapse

여기에 모형을 배치했습니다.

http://jsfiddle.net/gqe7g/

로딩 동작이 이상합니다. Menu1을 표시 한 다음 축소 한 다음 Menu2 및 Menu3을 표시합니다. 모든 것이 무너져 열면 좋겠습니다. 나는 성공하지 않고 다음을 시도했습니다

$('#accordion').collapse({hide: true})

---

교체

$(".collapse").collapse();
$('#accordion').collapse({hide: true})

와:

$('#collapseOne').collapse("hide");

트릭을해야합니다. 첫 번째는 기본적으로 켜져 있고이 한 줄은 꺼져 있다고 생각합니다.

---

문서에서 :

기본적으로 열리려면 추가 클래스를 추가하십시오.

즉, "in"을 생략하면 기본적으로 닫힙니다. http://jsfiddle.net/JBRh7/

---

페이지로드시 접힌 모든 것을 닫으려면 다음을 수행하십시오.

클래스에서 클래스로 collapse in교체하십시오 collapse.

id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">

업데이트 :

id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

---

변화

class="accordion-body collapse in"

에

class="accordion-body collapse"

온 collapseOne DIV

---

당신이 원하는 경우 아코디언 을 붕괴 는 기존에 수행 할 수 있습니다 초기에 부트 스트랩의 정의, 자바 스크립트가 필요하지 않습니다.

collapsed사용자가 열기 / 닫기 를 전환 할 수 있도록 클릭 대상이 될 앵커 또는 핸들에 클래스 를 추가합니다 . 또한 in접히는 컨테이너에서 클래스를 제거하십시오 .

부트 스트랩도 추가하여 전달 될 수있는 선택 사양의 몇 제공 data-parent=""및data-toggle=""

• data-parent 선택자를 받아들이고 데이터 부모의 형제 인 모든 축소 가능한 요소가 한꺼번에 토글되도록 지정합니다.
• data-toggle부울을 true받거나 false접을 수있는 요소에 대한 호출을 설정합니다.

---

예제 시나리오 :

➤ 축소 된로드

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Details

➤ 로드 확장 됨

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body">
            <div class="accordion-inner">
                Details

➤ 로드 확장 됨

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Details

세 번째 예제에서 아코디언은 컨테이너 collapsed의 in클래스가 더 많은 가중치를 받기 때문에 클래스가 지정 되었는지 여부에 관계없이 기본적으로 확장 됩니다.

---

자바 스크립트를 통해 아코디언을 트리거 collapse()하려면 축소 가능한 요소를 대상으로하는 적절한 ID 또는 클래스 선택기와 함께 메서드를 호출 하기 만하면됩니다.

collapse()또한 마크 업에 추가 할 수있는 것과 동일한 옵션을 허용합니다. data-parent과data-toggle

---

Menu2 및 Menu3에 대한 아코디언 바디 div에 'in'클래스가 없습니다.

각 아코디언 바디 div에는 class="accordion-body collapse in". 지금, 그들 중 몇 명은class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

---

You can pass the option toggle: false to the collapse statement to have all elements of the accordion hidden on load, like so:

$('.collapse').collapse({
    toggle: false
});

Demo: http://jsfiddle.net/gqe7g/9/

---

this is what i use for my accordian. it starts off fully closed. you want

 active: false;//this does the trick

full:

<div id="accordian_div">
    <h1>first</h1>
        <div>
            put something here
        </div>
    <h1>second</h1>
        <div>
            put something here
        </div>
    <h1>third</h1>
        <div>
            put something here
        </div>
</div>

<script type="text/javascript">
     $(document).ready(function() {
        $("#accordian_div").accordion({
            collapsible: true,
            active: false,
            clearStyle: true
        });
      });
</script>

Not familiar with bottstrap but this seems a bit cleaner than all the classes you have to deal with and works smoothly.

---

Just remove the .in class from .panel-collapse in "collapseOne". (Bootstrap v3.3.7)

---

Use the hide method that Bootstrap provides,

$('.collapse').collapse('hide')

Demo at http://thefanciful.com. My information is hidden on load, and activates when the button is pushed. :)

---

Using jQuery, This worked for me having ALL containers collapsed at page load

물론 추가 {active: false}하고 collapsible활성화 해야합니다.

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });

---

<script type="text/javascript">  

    jQuery(document).ready(function ($) {

       $('#collapseOne').collapse("hide");
    });      

</script>

---

나는 이것이 오래된 토론이라는 것을 알고 있지만 여기에 효과가 있었던 두 가지 솔루션이 더 있습니다.

1) 추가

aria-expanded="true"이 링크 내부 의 클래스 :

<a data-toggle="collapse" data-parent="#accordion"...></a>

2) 패널을 사용하는 경우 (아래와 같이)

<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">

변화 collapse in하는 것은 collapse out또한 트릭을 할 것입니다

참고 URL : https://stackoverflow.com/questions/9419470/how-do-i-get-my-accordion-to-load-with-all-the-menus-closed