jQuery手风琴 - 当另一个打开的手风琴窗格打开时如何折叠

我有一个手风琴，我想要有以下功能：当用户点击链接展开时，其他展开的链接（如果有的话）将坍方。我知道这个功能是在手风琴插件中构建的，但我试图避免添加另一个库（jQuery UI）。jQuery手风琴 - 当另一个打开的手风琴窗格打开时如何折叠

编辑：这里是我的代码现在（在这里是的jsfiddle：http://jsfiddle.net/s2Jfs/2/）：

$('.accordion-toggler').addClass('toggle-plus'); 

    $('.accordion-toggler').click(function() { 
     $this = $(this); 
     if($this.hasClass('toggle-plus')) { 
      $this.removeClass('toggle-plus').addClass('toggle-minus'); 
     } else { 
      $this.removeClass('toggle-minus').addClass('toggle-plus'); 
     } 
     $this.next('.mod-content').slideToggle(); 
    });

“调内容”类附加到应扩大内容/坍塌。现在，如果您展开一个项目，请将其打开，然后单击另一个项目，即可有多个展开区域。除了活动链接之外，我怎样才能折叠其他链接？

来源

2011-08-04 Paul Erdos

您能否提供http://jsfiddle.net或演示站点？ –

只需要注意，'$'符号不需要预先加载你的Javascript变量'$ this'。您可以简单地使用'this'来代替。 – 65Fbef05

您可以尝试将此行移动到顶部，并使用兄弟而不是下一个指定其他所有其他用户：'$ this.siblings（'.mod-content'）。slideToggle（）;'，然后显示当前行。你能发布一些HTML吗？ – Mrchief

你正在使这种方式比它更复杂。如果您只是想让其中一个滑下来，而另一些则滑回，请使用以下代码...

$('.accordion-toggler').click(function() { 
    var targetElement = $(this).next('.mod-content'); 
    targetElement.slideToggle(); 
    targetElement.siblings('.mod-content').slideUp(); 
});

来源

2011-08-04 19:04:21 65Fbef05

谢谢！这工作做我所问。但是，如果需要，我仍然可以选择全部折叠（可能会有很长的列表）。 –

我做了一些修改，应该做你想做的。 – 65Fbef05

我添加了您的更改：http://jsfiddle.net/ellenchristine/s2Jfs/4/。但是，现在您可以看到默认行为并未显示任何列表，因此您无法真正与链接交互。 –

jQuery手风琴 - 当另一个打开的手风琴窗格打开时如何折叠

回答

相关问题