2013-06-24 1 views
1

jQuery 아코디언 영역을 만들려고합니다. 그에 대한 <a> 태그를 클릭하면 내가 할 싶은 무엇jQuery Accordion Toggle Slide Up & Down

$(document).ready(function() { 

     var accordion_head = $('.accordion > li > .toggle'), 
      accordion_body = $('.accordion li > div'); 

     accordion_head.on('click', function(event) { 

      event.preventDefault(); 

      if ($(this).attr('class') != 'active') { 
       accordion_body.slideUp('normal'); 
       $(this).next().stop(true,true).slideDown('normal'); 
       accordion_head.removeClass('active'); 
       $(this).addClass('active'); 
      } 
     }); 
}); 

(토글) 각 영역 개폐입니다 다음과 같이

<ul class="accordion"> 
    <li> 
     <a class="toggle" href="#one">Toogle 1</a> 
     <div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
    </li> 
    <li> 
     <a class="toggle" href="#two">Toogle 2</a> 
     <div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
    </li> 
</ul> 

내 jQuery를이 다음과 같이 내 마크 업입니다 지역. <a>을 클릭하면 다른 영역이 닫히는 것을 원하지 않습니다. 여전히 열려있는 경우 <a>에 '활성'클래스가 적용되고 닫히면 클래스가 제거되기를 바랍니다. 이것에 대한 도움을 주시면 감사하겠습니다.

답변

1

요, DJ!

var accordion_head = $('.accordion > li > .toggle'); 

accordion_head.on('click', function (event) { 
    var $a = $(this); 
    event.preventDefault(); 

    if ($a.hasClass('active')) { 
     $a.removeClass('active').siblings('div').slideUp(); 
    } 
    else { 
     $a.addClass('active').siblings('div').slideDown(); 
    } 
}); 

Example fiddle

: 그냥이 질문 :

는 희망이 약간의 도움이 여전히 우연히 만났다