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

：对面这个问题:)

希望这是一些帮助还是来了