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

我最近买了Jake Rutter的“Smashing jQuery” - 这是一本很好的书，但我坚持修改了一些'Accordion'代码。如何在第二次点击时关闭jQuery Accordion效果？

单击某个部分时会按预期展开，但如果再次单击该部分（同时仍处于打开状态），它只会立即关闭以便再次立即打开。

我想要扩展部分关闭，如果它再次点击，只有点击时再次打开。希望这是有道理的。任何帮助将非常感激。

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

2012-01-08 StephenMeehan

你需要像下面的东西，使其工作。查看评论：

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

来源

2012-01-08 20:29:22 Sandeep

感谢Sandeep，但我无法获得此代码上班？ – StephenMeehan 2012-01-08 20:48:42

你至少能说出它在控制台上抛出什么错误或者什么部分不工作？我的示例代码只是给你一个想法。 – Sandeep 2012-01-08 22:10:19

好的，我在检查Ben的jsFiddle后修复了语法错误。 – Sandeep 2012-01-08 22:33:02

有读：

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

你需要一些if/else逻辑添加到点击功能，否则每次你点击它会在执行所有的代码段功能。

来源

2012-01-08 19:54:56

不会绕过窗口小部件的逻辑这混乱了其内部状态？ – millimoose 2012-01-08 19:59:21

感谢您的快速回复，我真的可以做更多的帮助。我希望它能像下面的链接一样工作。我试过编辑代码（在链接中），但我无法做到我想要的（这就是为什么我购买了这本书）。 http://jqueryui.com/demos/accordion/#collapsible – StephenMeehan 2012-01-08 20:12:32

在jsfiddle上设置你的代码，然后我们可以看看，因为已经提供的示例/答案应该工作 – 2012-01-08 21:54:25

您需要更改这个在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/

另外，我没有修改的最后2行，关于图标！

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

来源

2012-01-08 21:44:52

感谢您对我的看法。我将来会使用JS小提琴。我把代码放到了我的文件中，并且检查了JS小提琴页面，您是否已经设置好了，并且没有产生所需的效果？我错过了什么吗？ – StephenMeehan 2012-01-08 21:59:15

谢谢本。我修复了一个语法错误，该错误停止了我从工作中提供的答案:) – Sandeep 2012-01-08 22:33:55

再次感谢Ben，Sandeep的解决方案（看完你的后）。非常感谢你们在解决这个问题上的时间和精力。我从现在开始一定会使用JS Fiddle！ :) – StephenMeehan 2012-01-08 23:11:14

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

回答

相关问题