使用带有奇怪标记的 jQuery 手风琴

Posted 2023-05-07

【中文标题】使用带有奇怪标记的 jQuery 手风琴

【英文标题】：Using jQuery accordion with strange markup

【发布时间】：2010-09-18 01:52:24

【问题描述】：

我有这个 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>

基本上使用h3s 作为手风琴标题，每个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

【参考方案1】：

啊，我找到了解决办法。

使用$.each()

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

还有比这更好的解决方案吗？也许只是使用香草手风琴选项？

【参考方案2】：

这个怎么样：

$('.accor .section').each(function() 
    $('h3', this).insertBefore($(this));
);