jquery - 如何在第二次单击时关闭 jQuery Accordion 效果？

Question

我最近购买了 Jake Rutter 的《Smashing jQuery》——这是一本好书，但我一直在修改一些“Accordion”代码。

当单击某个部分时，它会按预期展开，但如果第二次单击(仍打开时)，它会关闭并立即再次打开。

我希望展开的部分在第二次单击时关闭，只有在单击时才再次打开。希望这是有道理的。任何帮助将不胜感激。

请参阅下面的演示 URL，了解我使用的示例和代码。 http://demos.d3-creative.com/accordion/accordion-1.html

Answer 1

你需要像下面这样的东西才能让它工作。查看评论:

var $header = $('.accordion-header'),//always cache your selectors
    $content = $('.accordion-content');

$header.click(function () {

    var $this = $(this),
        $relatedContent = $this.next();

    if($relatedContent.is(':visible')) { // If the tab is already open

        $relatedContent.slideUp('fast');

        $this.find('.icon-active').removeClass('icon-active');

        $this.removeClass('header-active');

    } else { // if the tab is closed

        // Close any other opened tabs
        $content.slideUp('fast');
        $header.removeClass('header-active');
        $header.find('span').removeClass('icon-active');

       // Open related tab
        $relatedContent.slideDown('fast');

        $this.find('span').addClass('icon-active');

        $this.addClass('header-active');
    }

});

并将 display:none 添加到 #accordion .accordion-content