Um acordeão em jQuery 1.3.2 não funciona (estava trabalhando em 1.3!)

Question

Ok, então em algum lugar, algo está errado. Quando eu estava usando a versão 1.3 do acordeão estava funcionando bem. Quando eu atualizado jQuery para a versão 1.3.2 agora já não funciona como é suposto. Eu preciso a versão mais recente porque ele está resolvendo alguns erros que IE6 estava vomitando ...

Então, aqui está o código, e o que precisa mudar para que ele para trabalhar com a mais recente vesion do 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 é algo como:

<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>

Devo observar que, onde ele não está funcionando, é que, quando a expansão de um segundo painel, o primeiro painel deve entrar em colapso como normal - mas com 1.3.2 não é o caso ...

---

* Eu atualizei o HTML com o que eu realmente tinha acontecendo, como parece que era o HTML / CSS que estava dando problemas.

Eu tive o conjunto CSS para:

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

para que ele para dar um "2 de colunas mesa-como" efeito (e para facilitar o cliente-CMS edição - apertar o botão de "bold" e aperte o botão "i") - mas parece que foi essa flutuante dos elementos que fizeram o acordeão não funciona. Quando eu removi o "float: left;" - ele trabalhou novamente como normal.

E isso não tira do fato de que este mesmo set-up trabalhos com jquery1.3.0, mas não com jquery1.3.2 - assim que algo ainda está errado

Answer 1

Acredito que sua $(this).next(".accordion div") selector não funcionará. next () única agarra, portanto, o próximo irmão fazendo um filtro que olha para as crianças é estranho.

Além disso, tente usar seletores com um nodeName ao invés de um seletor de classe css puro. Use div.accordian ao invés de apenas .accordian em seus js

Tente

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

Você pode precisar atualizar sua biblioteca acordeão bem. Alguns seletores de estilo, como os seletores de estilo [@attr] que os usos do acordeão poderia ter sido já obsoletas.