باستخدام الأكورديون مسج مع العلامات غريبة
سؤال
ولدي هذا الهيكل 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
المحلول
وآه، لقد وجدت الحل.
وعن طريق $.each()
$headings.each(function(i, el) {
var $this = $(el), $p = $this.parent();
$this.insertBefore($p);
});
هل هناك حل أفضل من هذا، على الرغم من؟ ربما فقط باستخدام الخيارات الفانيليا الأكورديون؟
نصائح أخرى
وماذا عن هذا:
$('.accor .section').each(function() {
$('h3', this).insertBefore($(this));
});
لا تنتمي إلى StackOverflow