如何在第二次单击时关闭jQuery手风琴效果？

我最近买了Jake Rutter的《粉碎jQuery》——这是一本好书，但我一直在修改一些“手风琴”代码

单击某个分区时，它会按预期进行扩展，但如果再次单击（仍处于打开状态），它将关闭，但只会立即再次打开

如果第二次单击，我希望展开的部分关闭，如果再次单击，则仅再次打开。希望这是有意义的。任何帮助都将不胜感激

请参阅下面的演示URL，了解我使用的示例和代码。 请阅读：

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

阅读：

---

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

您需要下面的内容才能使其正常工作。见评论：

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内容
您需要以下类似的内容才能正常工作。见评论：

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内容
您需要在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');

});

我已经改变了行为，因此每当你点击一个标题时，它首先关闭所有内容框，然后删除所有标题上的活动类，然后直接在点击的元素后面滑动打开该框，并更改其类。正如您所看到的，代码被注释了

例如：

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

旁注：我们都是初学者，所以我可以随意告诉你，如果你花些时间准备问题，人们会更容易帮助你。JS提琴很好，因为我们可以直接测试和修改您的代码。…
您需要在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');

});

我已经改变了行为，因此每当你点击一个标题时，它首先关闭所有内容框，然后删除所有标题上的活动类，然后直接在点击的元素后面滑动打开该框，并更改其类。正如您所看到的，代码被注释了

例如：

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

旁注：我们都是初学者，所以我可以随意告诉你，如果你花些时间准备问题，人们会更容易帮助你。JS fiddle很好，因为我们可以直接测试和修改您的代码……
不会绕过小部件逻辑，这会以某种方式破坏其内部状态吗？感谢您的快速回复，我真的需要更多的帮助。我希望它像下面的链接一样工作。我试着编辑代码（在链接中），但我不能让它做我想要的（这就是我买这本书的原因）。将您的代码设置在JSFIDLE上，然后我们可以看看已经提供的示例/答案是否正常工作不会绕过小部件逻辑这会以某种方式破坏其内部状态？感谢您的快速回复，我真的需要更多的帮助。我希望它像下面的链接一样工作。我试着编辑代码（在链接中），但我不能让它做我想要的（这就是我买这本书的原因）。在JSFIDLE上设置您的代码，然后我们可以看一看，因为已经提供的示例/答案应该能够帮助我了解这一点。将来我会使用JS小提琴。我把代码放到了我的文件中，检查了你善意设置的JS fiddle页面，但都没有产生所需的效果？我错过什么了吗？谢谢你，本。我修复了一个语法错误，该错误使我提供的答案无法工作：）再次感谢Ben，Sandeep的解决方案成功了（在查看了您的解决方案后）。非常感谢你们两位为解决这个问题花费的时间和精力。从现在起，我一定会使用JS Fiddle！：）谢谢你帮我看这个。将来我会使用JS小提琴。我把代码放到了我的文件中，检查了你善意设置的JS fiddle页面，但都没有产生所需的效果？我错过什么了吗？谢谢你，本。我修复了一个语法错误，该错误使我提供的答案无法工作：）再次感谢Ben，Sandeep的解决方案成功了（在查看了您的解决方案后）。非常感谢你们两位为解决这个问题花费的时间和精力。从现在起，我一定会使用JS Fiddle！：）你至少能告诉我它在控制台中抛出了什么错误或者哪个部分不工作吗？我的示例代码只是给您一个想法。好的，在检查Ben的jsFiddle.Works之后，我已经修复了语法错误！感谢Sandeep和Ben Baudart，我在这里上传了一个完整的工作示例：非常感谢您在这方面的帮助！这件事让我挠头了一整天。你至少能告诉我它在控制台中抛出了什么错误，或者哪个部分不起作用了吗？我的示例代码只是给您一个想法。好的，在检查Ben的jsFiddle.Works之后，我已经修复了语法错误！感谢Sandeep和Ben Baudart，我在这里上传了一个完整的工作示例：非常感谢您在这方面的帮助！这件事让我抓狂了一整天。