닫기 활성 아코디언 아이템

Question

이 달콤한 아코디언 메뉴를 발견했으며 조금 수정하고 싶습니다. 닫기 기능을 추가하고 싶습니다. 활성화되어있는 h2을 클릭하면 위로 밀고 닫힙니다. 어떻게하면 될까요?

당신은 이미 클릭 한 항목이 active 클래스가 있는지 확인해야

http://jsfiddle.net/tovic/CzE3q/

Answer 1

$(function() { 
    $('#accordion .content').hide(); 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    $('#accordion h2').click(function() { 
     if ($(this).next().is(':hidden')) { 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      $(this).toggleClass('active').next().slideDown('slow'); 
     } 
    }); 
}); 

. 이 시도 :

$('#accordion .content').hide(); 
$('#accordion h2:first').addClass('active').next().slideDown('slow'); 

$('#accordion h2').click(function() { 
    var openPanel = !$(this).hasClass('active') 
    $('#accordion h2').removeClass('active').next().slideUp('slow'); 
    openPanel && $(this).toggleClass('active').next().slideDown('slow'); 
}); 

Example fiddle

Answer 2

이 숨겨져 있지 않은 경우 창을 닫는 click 이벤트 핸들러에 else 블록을 추가합니다.

$(function() { 
    $('#accordion .content').hide(); 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    $('#accordion h2').click(function() { 
     if($(this).next().is(':hidden')) { 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      $(this).toggleClass('active').next().slideDown('slow'); 
     }else{ 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
     } 
    }); 
}); 

JS 바이올린 :http://jsfiddle.net/CzE3q/720/