Использование аккордеона jQuery со странной разметкой
Вопрос
У меня есть эта структура 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 было реструктурировано, чтобы h3
были вне каждого 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
Решение
Ах, я нашел решение.
Использование $. each ()
$headings.each(function(i, el) {
var $this = $(el), $p = $this.parent();
$this.insertBefore($p);
});
Есть ли лучшее решение, чем это? Возможно, просто использовать ванильные варианты Аккордеона?
Другие советы
Как насчет этого?
$('.accor .section').each(function() {
$('h3', this).insertBefore($(this));
});