두 번째 클릭시 jQuery 아코디언 효과를 닫으려면 어떻게해야합니까?

Question

최근에 Jake Rutter가 'Smashing jQuery'를 구입했습니다. 좋은 책이지만, '아코디언'코드를 수정해야합니다.

섹션을 클릭하면 해당 섹션이 의도 한대로 확장되지만 두 번째로 클릭하면 (열린 상태에서) 섹션이 즉시 닫히고 다시 열립니다.

두 번 클릭하면 펼쳐진 섹션을 닫고 싶습니다. 클릭하면 다시 열 수 있습니다. 희망이 의미가 있습니다. 어떤 도움이라도 대단히 감사 할 것입니다.

내가 사용한 예와 코드는 아래의 데모 URL을 참조하십시오.

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

당신이 다른 때마다 당신이이 모든 코드를 실행하는 것입니다 섹션을 클릭 클릭 기능에 약간의 경우/다른 논리를 추가해야합니다 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'); 
    } 

}); 

을 그리고 당신은 JS 부분에서 변경할 필요가 display:none

Answer 2

는 읽기가 기능.

Answer 3

#accordion .accordion-content에 추가 : 코멘트를 참조하면 머리글을 클릭 할 때마다 그래서 나는 동작을 변경 한

$('.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'); 

}); 

먼저 모든 내용 상자를 닫은 다음 모든 머리글에서 활성 클래스를 제거한 다음 클릭 된 요소 다음에 상자를 직접 열고 해당 클래스도 변경합니다. 볼 수있는 것처럼 코드가 주석 처리되었습니다! 여기

Exemple : 또한 http://jsfiddle.net/snzSy/

, 나는 아이콘에 대해 마지막 두 줄을 수정하지 않았다!

사이드 노트 : 우리는 모두 여기 초보자이기 때문에 질문을 준비하는 데 시간이 많이 걸리면 사람들이 당신을 도울 것이라고 쉽게 말할 수 있습니다. 우리가 코드를 직접 테스트하고 수정할 수 있기 때문에 JS 피들이 좋다. ...