我有这个 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
s 作为手风琴标题,并将每个中的其余div.section
内容作为每个手风琴面板的内容。(另请注意:标题可以是 h2 和 h6 之间的任何内容,具体取决于它们的嵌套)。
我认为如果 DOM 树被重组,那么这将是最简单的,因此h3
s 在每个之外,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