Question

我最近买了Jake Rutter的'Smashing jQuery' - 这是一本很好的书，但我很难修改一些'Accordion'代码。

单击某个部分时，它会按预期展开，但如果再次点击（同时仍然打开），它只会立即关闭。

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

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

Answer 1

读一读：

http://api.jquery.com/slideUp/

你需要在click函数中添加一些if / else逻辑，否则每次单击一个部分时它将执行函数中的所有代码。

Answer 2

你需要像下面这样的东西来使它工作。见评论：

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

Answer 3

您需要在JS部分中更改此内容：

$('.accordion-header').click(function () {
    $('.accordion-header').next().slideUp('fast'); // Close all boxes - Hide all contents
    $('.accordion-header').removeClass('header-active'); // Remove active class from all headers
    $(this).addClass('header-active'); // Adds active class to currently clicked element
    $(this).next().slideDown('fast'); // Shows content

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

});

我已更改了行为，因此无论何时单击标题，它首先关闭所有内容框，然后删除所有标题上的活动类，然后直接在单击的元素后面打开框，并更改其类。您可以看到代码已注释！

例如：http://jsfiddle.net/snzSy/

此外，关于图标，我没有修改最后两行！

旁注：我们都是初学者，所以我可以自由地告诉你，如果你花一些时间准备你的问题，人们会更容易帮助你。 JS小提琴很好，因为我们可以直接测试和修改你的代码....

如何在第二次点击时关闭jQuery Accordion效果？

3 个答案: