Jquery 手风琴中的手风琴折叠父手风琴_Jquery_Jquery Ui_Accordion

Jquery 手风琴中的手风琴折叠父手风琴

jquery jquery-ui

Jquery 手风琴中的手风琴折叠父手风琴,jquery,jquery-ui,accordion,Jquery,Jquery Ui,Accordion,我用的是jqueryui的手风琴控制。我被要求在手风琴中设置一个涉及手风琴的导航。看起来它可以制作所有的手风琴。我展开第一个，看到第二个。当我展开第二个时，我看到它展开了，但是它的父手风琴卷起，隐藏了我刚才展开的子手风琴此代码笔显示了我的问题：非常感谢您的帮助：我的HTML： <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquer

我用的是jqueryui的手风琴控制。我被要求在手风琴中设置一个涉及手风琴的导航。看起来它可以制作所有的手风琴。我展开第一个，看到第二个。当我展开第二个时，我看到它展开了，但是它的父手风琴卷起，隐藏了我刚才展开的子手风琴

此代码笔显示了我的问题：

非常感谢您的帮助：

我的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>

有什么帮助吗

看起来每个嵌套的accorbian都在

标记中，然后javascript变成：

$("div.accordian").accordion({ <options> });

手风琴（{}）；

这是我尚未在您的codepen示例上尝试的唯一选项。

您需要为子手风琴提供一个单独的

id

和

标题。通过使用相同的id
和header
jQuery可以同时折叠所有内容
下面的内容应该会让你走上正确的轨道。。。我刚刚复制了你原来的手风琴声明，并用sub\uuu
前缀对其进行了更新
$(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>






冠状动脉粥样硬化
你能再详细说明一下什么地方出了问题吗？我只是试着把我所有的ul都放到一个div中，但似乎没有用。当我单击一个较低级别的手风琴时，它们仍然会卷起。问题似乎围绕使用header属性展开。单击与标题中的内容具有相同属性的内容会触发塌陷事件，即使它位于较低的位置。我尝试了上面这家伙的解决方案，使用了不同的id，但也为header属性使用了不同的类，并将它们分离出来。我可以制作类似于您昨天链接到的另一个codepen示例的子坐标，但在JSFIDLE中玩时，我无法生成您需要的任何东西，抱歉。
<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>