Аккордеон в 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;}

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

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

Answer 1

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

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

Возможно, вам также придется обновить свою библиотеку Accordion.Некоторые селекторы стилей, такие как [@attr] селекторы стилей, которые использует Accordion, возможно, уже устарели.