如何在第二次點擊時關閉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效果？

回答

相關問題