0

私はこの HTML 構造を持っており、それをアコーディオンに変換したいと考えています。

<div class="accor">
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
    <div class="section">
        <h3>Sub section</h3>
        <p>Sub section text</p>
    </div>
</div>

基本的に をh3アコーディオン ヘッダーとして使用し、それぞれの残りのdiv.sectionコンテンツを各アコーディオン パネルのコンテンツとして使用します。(注: 見出しは、ネストに応じて、h2 から h6 の間のいずれかになります)。

デフォルトでアコーディオンがどのように機能するかという理由から、DOM ツリーを再構築してh3s をそれぞれの外側にすると、これが最も簡単になると考えました。div

    <h3>Sub section</h3>
    <div class="section">
        <p>Sub section text</p>
    </div>

唯一の問題は、見出しを移動する方法です。(HTML を変更するアクセス権がありません)。

var $sections = $("div.accor > .section"),
    $headings = $sections.find("> :header")
;
// I figured that inserting each heading to be before its parent might
// be the answer:
$headings.insertBefore($headings.find(":parent"));

// ... but that doesn't do anything
4

2 に答える 2

1

ああ、私は解決策を見つけました。

使用する$.each()

$headings.each(function(i, el) {
    var $this = $(el), $p = $this.parent();
    $this.insertBefore($p);
});

しかし、これよりも良い解決策はありますか? おそらくバニラアコーディオンオプションを使用しているだけですか？

于 2008-10-20T07:29:42.843 に答える
0

これはどう：

$('.accor .section').each(function() {
    $('h3', this).insertBefore($(this));
});
于 2008-10-20T07:38:33.420 に答える