手风琴一次打开一个标签

时间:2013-04-01 06:58:08

标签: jquery jquery-ui css3 accordion

我手风琴的工作非常好,但我需要的是一次只打开一个标签,这意味着打开一个标签然后应该关闭另一个标签。

目前,您可以看到我们可以点击标签链接打开所有标签页。

此处代码

$("#accordion > li > span").click(function() {
  $(this).siblings("div").slideToggle(250);
        $(this).toggleClass("active");

});

以下是 Fiddle

2 个答案:

答案 0 :(得分:2)

LIVE DEMO

$("#accordion > li > span").click(function() {
    $(this).closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250);
    $(this).toggleClass("active").next('div').slideToggle(250);
});

<小时/> 或者像: LIVE DEMO

$("#accordion > li > span").click(function() {
    $(this).toggleClass("active").next('div').slideToggle(250)
    .closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250);
});

答案 1 :(得分:0)

您还可以通过添加beforeActivate回调来关闭其他手风琴:

$( ".myAccordion" ).accordion({
      collapsible: true,
      active: false,
    heightStyle: "content",
    beforeActivate: function(event, ui) {
   $( ".myAccordion" ).not(this).accordion('option', 'active', false);
}