3

jQuery UI アコーディオンのマークアップは次のようになります...

<div id="accordion">

    <h3><a href="#">First header</a></h3>
    <div>First content</div>

    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>

</div>

簡単に言えば、私が使用しているメニューのマークアップは、ほとんどが私の制御範囲外です。このように見えます...

<div id="sidebar">
    <ul>
        <li class="drop">
            <a href="#">xxxxxxxxxx</a>
            <ul class="sub-menu">
                <li>xxxxxxxxxx</li>
                <li>xxxxxxxxxx</li>
                <li>xxxxxxxxxx</li>
            </ul>
        </li>
        <li><a href="#">xxxxxxxxxx</a></li>
        <li><a href="#">xxxxxxxxxx</a></li>
        <li><a href="#">xxxxxxxxxx</a></li>
    </ul>
</div>

クラスを第 1 レベルのリスト項目に選択的に追加できます。これは、サブ メニューがある場合に行います。「ドロップ」を追加して（上記のように）、このようにアコーディオンをセットアップしました...

$("#sidebar").accordion({
    header: 'li.drop'
});

その部分はうまく機能します。jQuery が想定どおりにすべてのアコーディオン クラスを追加していることがわかります。問題は、スクリプトがコンテンツ パネルとして使用するヘッダーの直後にある div を探していることです。ul class="sub-menu"マークアップのその部分を制御できないため、div でラップできません。どの要素をコンテンツ パネルとして使用するか、つまり「サブメニュー」クラスの ul を設定する方法を見つけようとしています。何か案は？

助けてくれてありがとう。

4

1 に答える 1

1

アコーディオンは を探しませんdiv。ヘッダーの次の要素を探します。
したがって、指定されたマークアップを後処理できます。アコーディオンを適用する前に、次のコードを挿入してください。

$("li.drop").each(function() {
    $(this).after($(this).find(".sub-menu"));
});
于 2012-06-07T20:24:05.307 に答える