带有多个描述项的jQuery Accordion定义列表

我似乎无法使用具有多个desciption项（dd）的定义列表的jQuery Accordions 。 作者的例子只有单个dd项。

在B2下面的例子中，B3和C2显示onLoad，而不是像我希望的那样隐藏A1，B1和C1。

我怎么做到这一点？

jQuery('dl').accordion({ event: 'click', active: false, animated: "bounceslide", header: "dt" });​ 
 
A
 
A1
 
B
 
B1
 
B2
 
B3
 
C
 
C1
 
C2
  

（ 直播jsFiddle版 ）

Answer 1

• 演示： http ： //so.lucafilosofi.com/jquery-accordion-definition-list-with-multiple-description-items

 $(function () { $('dt').on('click', function (e) { e.preventDefault(); $(this).parent('dl').children('dd:visible').slideUp('slow'); $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow'); }); }); 

注意：

如果你想要多个部分

立即打开，不要使用手风琴

• 手风琴不允许同时打开多个内容面板，这需要花费很多精力。 如果您正在寻找允许打开多个内容面板的小部件，请不要使用它。 通常它可以用几行jQuery编写，例如： http ： //jqueryui.com/demos/accordion/

希望这个帮助！ ;）

Answer 2

作者声称内容需要与其标题相邻。 Inspect Element显示它忽略了额外的

：

 
B
 
B1
 
B2
 
B3 

如果您可以控制HTML呈现，则可以将

元素嵌套在

：

 
B
 
 
B1
 
B2
 
B3
  

Answer 3

只是为了补充一个简单的解决方案 ：如果你想在页面加载时关闭除第一个之外的所有项目，请添加： $('dd:not(:first-of-type)').hide();

我建议在Accordions上使用一个类，所以你仍然可以在你的标记中使用unjqueryfized定义列表。 像这样：

 $('.accordion dd:not(:first-of-type)').hide(); $('.accordion dt').on('click', function (e) { e.preventDefault(); $(this).parent('dl.accordion').children('dd:visible').slideUp('slow'); $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow'); }); 

（然后在HTML中使用

...

）