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

发布于 2024-11-28 00:00:21 字数 739 浏览 0 评论 0原文

我有一个手风琴，我希望具有以下功能：当用户单击链接展开时，其他展开的链接（如果有）将折叠。我知道这个功能是内置在手风琴插件中的，但我试图避免添加另一个库（jQuery UI）。

编辑：这是我现在拥有的代码（这里位于 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”类附加到应展开/折叠的内容。现在，如果您展开一项，将其保持打开状态，然后单击另一项，则会有多个展开区域。如何折叠除活动链接之外的其他链接？

原文

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).

EDIT: 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();
    });

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不寐倦长更 2024-12-05 00:00:21

你让这种方式变得比它必须的更复杂。如果您只是想让其中一个向下滑动，而其他则向上滑动，请使用以下代码...

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

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();
});

回复收藏 0 原文

~没有更多了~