Аккордеон в jQuery 1.3.2 не работает (работал в 1.3!)

Question

Хорошо, так где-то, что-то не так. Когда я использовал версию 1.3, аккордеон работал нормально. Когда я обновил jQuery до версии 1.3.2, теперь он больше не работает, как предполагалось. Мне нужна последняя версия, потому что она решает некоторые ошибки, которые IE6 выбрасывает ...

Итак, вот код и что нужно изменить, чтобы он работал с последним версией jQuery?

$(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;} 

для того, чтобы дать «столообразный 2-колонный» эффект (и для удобного редактирования клиента CMS - нажмите на кнопку «жирную» и нажмите кнопку «i»), но, похоже, именно это плавание элементов заставило аккордеон не работать. Когда я удалил «float: left;» - он работал снова как обычно.

И это не убирает из-за того, что эта же настройка работает с jquery1.3.0, но не с jquery1.3.2 - так что-то все еще не так!

Answer 1

Я считаю, что ваш селектор $(this).next(".accordion div") не будет работать. next() только захватывает следующего брата, поэтому делать фильтр, который смотрит на детей, является нечетным.

Также попробуйте использовать селекторы с именем node, а не селектором класса чистого 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], которые использовали Аккордеон, уже устарели.