아코디언을 열어 두도록 Twitter Bootstrap 축소 플러그인 수정

아코디언을 열어 두도록 Twitter Bootstrap 축소 플러그인 수정

---

아코디언을 클릭하면 (열려면) 아코디언의 다른 항목을 자동으로 닫아야하는지 여부를 지정할 수 있도록 부트 스트랩 축소 플러그인을 수정하려고합니다 (아코디언에서 한 번에 둘 이상의 항목을 열 수 있음).

아코디언에 새 데이터 속성을 만들고 싶습니다. data-collapse-type="auto|manual"

부트 스트랩 jQuery 플러그인은 내 기술 수준에 비해 약간 고급입니다. 내가 엉망으로 만드는 가장 관련성이 높은 부분은 52 번 줄에있는 것 같습니다 actives.collapse('hide'). 'data-collapse-type = "manual"'이 설정되어있는 경우 발생하지 않기를 바랍니다 (속성 또는 설정을 생략 auto하면 기본 동작을 유지해야 함).

나는 내가 experiementing 하고있는 jsfiddle을 만들었습니다 .

누구든지 이것으로 나를 올바른 길로 인도 할 수 있습니까?

---

나는 당신의 바이올린을 포크하고 업데이트했습니다.

.show 함수로 이동하면 주석도 작성했습니다.

http://jsfiddle.net/2Rnpz/

---

실제로 코드를 수정할 필요가 없습니다 . twitterbootstrap 사이트에서 자세히 읽어보십시오.

접을 수있는 요소의 제어를 자동으로 할당하려면 요소에 data-toggle = "collapse"및 data-target을 추가하기 만하면됩니다. data-target 속성은 축소를 적용 할 CSS 선택자를 허용합니다. 접을 수있는 요소에 클래스 축소를 추가해야합니다. 기본적으로 열리려면 추가 클래스를 추가하십시오.

그래서 대신에 사용하여 data-parent='#idofAccordion', 사용 data-target='#idofCollapseItem'.

완벽하게 작동합니다.

다음은 플 런커에 대한 데모입니다.

---

질문이 부트 스트랩의 특정 버전을 언급하지 않았기 때문에 여기에 부트 스트랩 4 솔루션이 있습니다. 속성이 data-parent="#accordion"있는 태그에서를 제거하십시오 data-toggle="collapse". data-parent=#accordion"비트를 꺼낸 Collapse 문서에서 가져온 예 입니다.

bootply : https://www.bootply.com/3wV4WbzBtT#

---

한 번에 하나의 아코디언 만 열도록하는 기술 (나머지 축소)은 data-parent = "# accordion"data-target = "# collapseOne"을 모두 배치하므로 다음과 같습니다.

<a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>

plunker에서 볼 수 있습니다 : http://plnkr.co/edit/56iXtA?p=preview

참고 URL : https://stackoverflow.com/questions/10019689/modify-twitter-bootstrap-collapse-plugin-to-keep-accordions-open