jQuery 1.3.2 中的手风琴不工作（在 1.3 中工作！）

Posted 2023-03-24

【中文标题】jQuery 1.3.2 中的手风琴不工作（在 1.3 中工作！）

【英文标题】：An accordion in jQuery 1.3.2 not working (was working in 1.3!)

【发布时间】：2010-11-21 05:46:28

【问题描述】：

好的，所以在某个地方，出了点问题。当我使用 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 strongdisplay:block;float:left;width:250px;background:#ccc;
li emdisplay:block;float:left;width:700px;background:#ddd;

为了提供“类似于 2 列的表格”的效果（并且为了便于客户端 CMS 编辑 - 点击“粗体”按钮并点击“i”按钮） - 但似乎是这样使手风琴不起作用的元素的浮动。当我删除“浮动：左；” - 它再次正常工作。

这并没有消除这样一个事实，即相同的设置适用于 jquery1.3.0 但不适用于 jquery1.3.2 - 所以还是有问题！

【问题讨论】：

你能粘贴标记吗

上面已经添加了标记...

更新了我的答案，在这里可以正常工作（没有任何样式）pastebin.me/e60983724a0a8dad1ffd2c46f5db71d4

这里 - jsbin.com/uxuce

将 /edit 添加到 URL 以播放演示

【参考方案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');

);

【讨论】：

感谢 redsquare（再次！） - 但它似乎没有任何区别，仍然在做同样的事情......使用 nodeName 是否使规则更具体？

只是让选择器更快。你能帮我过去标记吗

a .class 选择器将搜索 div.class 可以首先使用 getElementsByTagName 的所有元素

根据下一个文档 - docs.jquery.com/Traversing/next ，传递一个表达式将过滤下一个兄弟元素，所以只有当初始选择器包含多个元素时才真正有用，这不是使用 $(this) 作为选择器时的情况

谢谢大家。我只使用上面的 HTML 和 javascript 以及宾果游戏就让它在本地运行！在我的开发工作中，虽然它不起作用，但一定与其他东西发生冲突......干杯。

【参考方案2】：

您可能还需要升级您的 Accordion 库。一些样式选择器，例如 Accordion 使用的 [@attr] 样式选择器可能已经被弃用了。