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() 只获取下一个同级，因此执行一个查看子级的过滤器很奇怪。

还尝试使用带有 nodeName 的选择器而不是纯 css 类选择器。
在你的js中使用 div.accordian 而不仅仅是 .accordian

尝试

 $(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] 样式选择器）可能已被弃用。