Аккордеон в jQuery 1.3.2 не работает (работал в 1.3!) - PullRequest
Новая
       33

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

0 голосов
/ 20 августа 2009

Хорошо, где-то что-то не так. Когда я использовал версию 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 - так что что-то не так!

Ответы [ 2 ]

1 голос
/ 20 августа 2009

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

1 голос
/ 20 августа 2009

Я считаю, что ваш селектор $(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');

});
...