jQuery Accordion Toggle Slide Up＆Down

Question

我正在嘗試創建一個jQuery手風琴區域。我的標記如下：

<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是如下：

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

我想什麼它做對<a>標記爲點擊時是打開和關閉（切換）每個區域區。點擊另一個<a>時，我不希望其他區域關閉。當我打開它時，我仍然希望將'active'類應用於<a>，並且在關閉時刪除該類。任何幫助，這將不勝感激。

Answer 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

：對面這個問題:)

希望這是一些幫助還是來了