0

Tl;dr: 一番下までスクロールすると、簡単な説明が表示されます。

ちょっと変わった問題を抱えていると思いたいです。何よりもまず..私はすでにインターネット/グーグル、および含まれているサイト、およびこの質問をするときの提案を見てきました。

手元の話題に戻ると、ネストされた一連のアコーディオンを生成しています。ここでは、ネストの量が動的に生成されます。つまり、最下位レベルのアイテムが持つことができる親の数に制限が設定されていないため、 「.acord1、.acord2、.acord3」などのオプションではありません。

問題に.. アコーディオンのヘッダーのいくつかは最下層の項目であり、それらには子がなく、アコーディオンが添付されていません。

以下の例の html には、直面している問題を再現しているため、上記の項目が含まれていません。これは、header:オプション (前述の項目を除外するために使用します) を追加すると、最上位のアコーディオンがトリガーされ、閉じられるという事実です。子の 1 つがクリックされたとき。

以下は、最小限のコードで再現できたテストケースです。

<div class="acord">
    <h3>test1</h3>
    <div class="acord">
        <h3>test2</h3>
        <div>test2cont</div>
    </div>
    <h3 class="item">test3</h3>
</div>

$(".acord").accordion({
    header: "h3:not(.item)",
    heightStyle: "content",
    active: false,
    collapsible: true,
});

上記の場合、tl;drネストされたアコーディオンでヘッダー オプションを指定しても機能せず、(クリックされた) 子アコーディオンの親が閉じます。

JSフィドル

解決策はありますか？

4

1 に答える 1

1

以下は、私が管理した回避策です。それは醜いですが、他のいくつかのことで仕事を成し遂げます。jqueryアコーディオンヘッダーのアイコンとパディングとクリック機能を削除するよりも良いアイデアがある場合は、この質問に答えてください。それまで：

$(".acord").accordion({
    heightStyle: "content",
    active: false,
    collapsible: true,
    changestart: function (event, ui) {
        if ($(event.currentTarget).hasClass("item")) {
            event.preventDefault();
            $(event.currentTarget).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    }
});

編集：

jQuery バグ トラッカーにいる人々のおかげで、これははるかに優れた解決策で解決されました。

$(".acord").accordion({
    header: "> h3:not(.item)", //this line
    heightStyle: "content",
    active: false,
    collapsible: true
});
于 2013-01-25T09:16:41.397 に答える