jQuery의 중첩 아코디언 메뉴
문제
중첩 아코디언 세트를 사용하여 구현 된 메뉴가 있습니다. 1
그리고 2
, 각각 요소와, a
그리고 b
.
다음 논리를 구현하고 싶습니다.
클릭하면
1a
, 나는 데이터를 얻을 것이다1a
그리고 두 개의 잠수함2a
,2b
클릭하면
2a
,2b
각각의 데이터를 각각 얻을 수 있습니다.
문제
원하는 결과 :
- 나는 단지 표시하고 싶다
nth-most
마지막 클릭에 대한 자식 요소는 다른 모든 것을 무너 뜨립니다. - 초기화 후에 만
1a
그리고1b
눈에 잘 띄어 야합니다.
현재 결과 :
- 클릭
1b
, 그럼2b
,1b
여전히 완전히 보입니다.
자바 스크립트 코드
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
HTML :
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
</div>
<div>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
해결책
HTML의 요소 순서를 몇 가지 변경하면 원하는 동작을 얻습니다. 처음에는 1A와 1B 만 열려 있습니다. 마찬가지로 1B를 클릭하면 이제 1A가 닫히면 열린 2A/2B 섹션도 숨 깁니다.
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span></a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span></a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
</body>
제휴하지 않습니다 StackOverflow