jQuery 中的嵌套手风琴菜单
我有一个使用一组嵌套手风琴 1 和 2 实现的菜单，每个菜单都有元素 a 和 b >。
我想实现以下逻辑：
当我点击
1a时，我将获取1a的数据和两个子菜单2a，2b当我点击
2a，2b我将分别获取每个数据。
问题
期望的结果：
- 我只想显示最后一次点击的
第n个子元素，折叠所有其他子元素。 - 初始化后，只有
1a和1b应该可见。
当前结果：
- 单击
1b，然后单击2b，1b仍然完全可见。
JavaScript 代码
$(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>
I have a menu implemented using a set of nested accordions, 1 and 2, each with elements, a and b.
I would like to implement the following logic:
When I click
1a, I will get the data of1aand two submenu2a,2bWhen I click
2a,2bI will get the data of each, respectively.
The problem
Desired result:
- I only want to display the
nth-mostchild element for the last click, collapsing all others. - Upon initialization, only
1aand1bshould be visible.
Current result:
- Clicking on
1b, then on2b,1bis still fully visible.
JavaScript code
$(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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只需对 HTML 中的元素顺序进行一些更改，即可获得所需的行为。 现在一开始只有 1a 和 1b 开放。 同样，当您现在单击 1b 时，它将关闭 1a，这也会隐藏任何打开的 2a/2b 部分。
Just a few changes to the order of the elements in your HTML and you get the behavior you are looking for. At the start now only 1a and 1b are open. Similarly when you click on 1b now it will close 1a which will hide any open 2a/2b section as well.