0

jqueryui のアコーディオン コントロールを使用しています。アコーディオン内のアコーディオンを含むナビゲーションをセットアップする必要があります。すべてのアコーディオンを正常に構築しているようです。最初のものを拡大して、2番目のものを見ます。2 番目のアコーディオンを展開すると、展開されますが、その親アコーディオンが巻き上げられ、展開したばかりの子アコーディオンが非表示になります。

このコードペンは私の問題を示しています: 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();
    });
});
4

2 に答える 2

0

サブアコーディオン用のidとが別途必要です。header同じものを使用するとid、headerjQueryはすべてを同時に折りたたんでいます。

以下は正しい軌道に乗るはずです...元のアコーディオン宣言をコピーし、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>
于 2013-05-24T12:11:19.553 に答える
0

https://stackoverflow.com/a/14616985/1847695助けてください。

ネストされた各アコーディオンが<div>タグ内にあるように見え、JavaScript は次のようになります。

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

これは、codepen サンプルでまだ試していない唯一のオプションです。

于 2013-02-26T17:00:35.997 に答える