手风琴内手风琴塌陷母手风琴
手风琴内手风琴塌陷母手风琴
提问于 2013-02-26 16:21:13
我在用jqueryui的手风琴控制装置。我需要在手风琴内建立一个包括手风琴在内的导航系统。看起来它制造了所有的手风琴，好吗。我展开第一个，看到第二个。当我展开第二个手风琴时，我看到它展开，但它的父手风琴卷起来，隐藏了我刚刚展开的儿童手风琴。
这个代码展示了我的问题：http://codepen.io/chodenode/pen/Evnsz
非常感谢您的帮助：
我的HTML：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<body>
<ul id="navigation">
<li class="parent-li">
<span class="topic"><a href="">Cardiac</a></span>
<span class="header"></span>
<ul>
<li class="parent-li">
<span class="topic">Coronary Atherosclerosis</span>
<span class="header"></span>
<ul>
<li>
<a href="">Clinical Outcome Profile</a>
<span class="header"></span>
<ul>
<li>Coronary Atherosclerosis Per 1000 ACA</li>
<li>Coronary Atherosclerosis Comorbidity</li>
<li>Coronary Atherosclerosis % with PTCA</li>
<li>Coronary Atherosclerosis Mortality Rate</li>
</ul>
</li>
<li>
<a class="parent" href="">MS-DRG Care Management Profile</a>
<span class="header"></span>
<ul>
<li>MS-DRG 286 Circulatory disorders except AMI w card cath w MCC</li>
<li>MS-DRG 302 Atherosclerosis w MCC</li>
<li>MS-DRG 303 Atherosclerosis w/o MCC</li>
<li>MS-DRG 304 Hypertension w MCC</li>
</ul>
</li>
</ul>
</li>
<li class="parent-li">
<span class="topic">Chest Pain</span>
</li>
<li class="parent-li">
<span class="topic">Angina</span>
</li>
</ul>
</li>
<li class="parent-li">
<span class="topic">Vascular</span>
<span class="header"></span>
<ul></ul>
</li>
<li class="parent-li">
<span class="topic">Respiratory</span>
<span class="header"></span>
<ul></ul>
</li>
</ul>
</body> 我的代码：
$(document).ready(function() {
$('#navigation').accordion({
header: '.header',
event: 'click',
collapsible: true,
heightStyle: 'content',
active: false,
fillSpace: true,
});
$('a').click(function(event) {
event.preventDefault();
});
});回答 2
Stack Overflow用户
发布于 2013-02-26 17:00:35
https://stackoverflow.com/a/14616985/1847695有什么帮助吗。
看起来每个嵌套的手风琴都在一个<div>标记中，然后javascript变成：
$("div.accordian").accordion({ <options> });这是我还没有在你的代码样本上尝试过的唯一选择。
Stack Overflow用户
发布于 2013-05-24 12:11:19
你需要一个独立的id和header的副手风琴。通过使用相同的id和header，jQuery同时崩溃了所有的东西。
下面这些应该会让你走上正确的轨道..。我刚刚复制了你的原始手风琴声明并用sub_前缀更新了它
$(document).ready(function() {
$('#navigation').accordion({
header: '.header',
event: 'click',
collapsible: true,
heightStyle: 'content',
active: false,
fillSpace: true,
});
$('#sub_navigation').accordion({
header: '.sub_header',
event: 'click',
collapsible: true,
heightStyle: 'content',
active: false,
fillSpace: true,
});然后更新html以反映脚本更改：
<body>
<ul id="navigation">
<li class="parent-li">
<span class="topic"><a href="">Cardiac</a></span>
<span class="header"></span>
<ul>
<li id="sub_navigation" class="parent-li">
<span class="topic">Coronary Atherosclerosis</span>
<span class="sub_header"></span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15094108
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号