手风琴内的手风琴会使父手风琴崩溃 [英] accordion within accordion collapses parent accordion
问题描述
我正在使用jqueryui的手风琴控件.我需要设置一个在手风琴中涉及手风琴的导航. 看起来就像构建所有手风琴一样.我扩展第一个，然后看第二个.当我扩展第二个手风琴时，我看到它扩展了，但是它的父手风琴卷起并隐藏了我刚刚扩展的子手风琴.
I'm using jqueryui's accordion control. I'm required to set up a navigation that involves accordions within accordions. It looks like it builds all the accordions okay. I expand the first one and see the second one. When I expand the second one, I see it expand, but then its parent accordion rolls up and hides the child accordion I just expanded.
此代码笔显示了我的问题: http://codepen.io/chodenode/pen/Evnsz
This codepen shows my problem: 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();
});
});
推荐答案
您需要为子手风琴单独设置id和header.通过使用相同的id和header jQuery可以同时折叠所有内容.
You need to have a seperate id and header for the sub-accordion. by using the same id and header jQuery is collapsing everything at the same time.
以下内容将使您走上正确的道路……我只是复制了原始的手风琴声明，并使用sub_前缀对其进行了更新
The following should get you on the right track... I just copied your original accordion declaration and updated it with a sub_ prefix
$(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以反映脚本更改:
Then update your html to reflect the script changes:
<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>
这篇关于手风琴内的手风琴会使父手风琴崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
