الأكورديون في JQuery 1.3.2 لا يعمل (كان يعمل في 1.3!)

Question

حسنا، في مكان ما، هناك شيء خاطئ. عندما كنت أستخدم الإصدار 1.3 كان الأكورديون يعمل بشكل جيد. عندما قمت بالترقية jQuery إلى الإصدار 1.3.2 الآن لم يعد يعمل كما يفترض أن. أحتاج إلى أحدث إصدار لأنه حل بعض الأخطاء التي كان IE6 رمي ...

إذن إليك الكود، وما الذي يحتاج إلى التغيير من أجل العمل مع أحدث جيعي؟

$(function() {

$(".accordion h4").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h4").click(function(){
    $(this).next(".accordion div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger('click');

});

HTML يذهب شيئا مثل:

<div class="accordion">

<h4 id="open">Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

يجب أن ألاحظ، أنه حيث لا يعمل، هو أنه عند توسيع لوحة ثانية، يجب أن تنهار اللوحة الأولى بشكل طبيعي - ولكن مع 1.3.2 فليس هذا هو الحال ...

---

* لقد قمت بتحديث HTML مع ما أذهب إليه حقا، كما يبدو أنه كان HTML / CSS الذي كان يعطي مشاكل.

كان لدي مجموعة CSS إلى:

li strong{display:block;float:left;width:250px;background:#ccc;}
li em{display:block;float:left;width:700px;background:#ddd;}

من أجل إعطاء تأثير "يشبه الجدول الكاموليين" (وللحرير سهلة العميل - CMS - اضغط على زر "جريئة" واضغط على زر "I") - لكن يبدو أنه كان هذا العائمة العناصر التي جعلت الأكورديون لا تعمل. عندما أزلت "تعويم: اليسار؛" - عملت مرة أخرى كالمعتاد.

ولا يستغرق الأمر من حقيقة أن هذه الإعداد نفسها تعمل مع JQuery1.3.0 ولكن ليس مع JQuery1.3.2 - لذلك لا يزال هناك شيء خاطئ!

Answer 1

أعتقد أن محدد الخاص بك $(this).next(".accordion div") لن يعمل. بعد ذلك () فقط الاستيلاء على الأخوة التالية وبالتالي تقوم بمرشح ينظر إلى الأطفال أمر غريب.

حاول أيضا استخدام محددات مع Nodename بدلا من محدد فئة CSS نقية. يستخدم div.accordian افضل من مجرد .accordian في الخاص بك JS.

محاولة

 $(function() {
   $("div.accordion h4").eq(2).addClass("active");
   $("div.accordion div").eq(2).show();

   $("div.accordion h4").live('click', function(){
       var $el = $(this);
       $el.next()
          .slideToggle("slow")
          .siblings("div:visible")
          .slideUp("slow");
       $el.toggleClass("active");
       $el.siblings("h4").removeClass("active");
   });

   $("div.accordion div").hide();

   $("h4#open").trigger('click');

});

Answer 2

قد تحتاج إلى ترقية مكتبة الأكورديون أيضا. بعض محددات النمط مثل [@attr] محددات الأناقة التي تستخدمها أكورديون قد تم إهمالها بالفعل.