jQuery手风琴-如何在打开另一个手风琴窗格时折叠其他打开的手风琴窗格 [英] jQuery accordion - how to collapse other open accordion panes when another one is opened

问题描述

我有一个手风琴，我希望具有以下功能:当用户单击一个链接进行扩展时，其他扩展的链接(如果有)将折叠.我知道此功能是在手风琴插件中内置的，但我试图避免添加另一个库(jQuery UI).

I have an accordion that I want to have the following functionality: when the user clicks on a link to expand, the other expanded links (if any) will collapse. I know this functionality is built in the accordion plugin, but I'm trying to avoid adding another library (jQuery UI).

这是我现在拥有的代码(在jsFiddle上: http://jsfiddle.net/s2Jfs/2/):

Here is the code I have right now (here it is on 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();
    });

"mod-content"类附加到应扩展/折叠的内容上.现在，如果您展开一项，将其保持打开状态，然后单击另一项，则将有多个展开区域.除了活动链接之外，如何折叠其他链接?

The "mod-content" class is attached to the content that should be expanded/collapsed. Right now, if you expand one item, leave it open, then click another, you have more than one expanded areas. How can I collapse other links except for the active one?

推荐答案

您正在使这种方式变得比必须的更加复杂.如果您只是想让一个滑下来，而另一个滑回去，请使用以下代码...

You're making this way more complicated than it has to be. If you're simply wanting one to slide down while the others slide back up, use the following code...

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

这篇关于jQuery手风琴-如何在打开另一个手风琴窗格时折叠其他打开的手风琴窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！