jquery - 快速简单的一个...向这个手风琴添加活动类？

Question

我需要一个活动链接添加到这个手风琴上的实际链接。目前它只是将一个添加到容器中，这也很方便，但是向按钮链接添加一个活动是多么容易，所以我可以有一个向上或向下箭头.. .?

<dl class="accordion">

    <dt><a href="">Panel 1</a></dt>
    <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

    <dt><a href="">Panel 2</a></dt>
    <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

    <dt><a href="">Panel 3</a></dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

    </dl>​


jQuery(document).ready(function($) {



      var allPanels = $('.accordion > dd').hide();

      $('.accordion > dt > a').click(function() {
          $this = $(this);
          $target =  $this.parent().next();

          if(!$target.hasClass('active')){
             allPanels.removeClass('active').slideUp();
             $target.addClass('active').slideDown();
          }

        return false;
      });


});

非常感谢您的帮助..

Answer 1

试试这个...

jQuery(document).ready(function($) {
var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
      $this = $(this);
      $target =  $this.parent().next();

      if(!$target.hasClass('active')){
         allPanels.removeClass('active').slideUp();

         $target.addClass('active').slideDown();

         $('.accordion > dt > a').removeClass('active'); // remove class active in <a>
         $this.addClass('active'); // add class active in clicked  <a>

         //or//

         $('.accordion > dt').removeClass('active'); // remove class active in <dt>
         $this.parent().addClass('active'); // add class active in clicked  <dt>
      }

    return false;
  });

Answer 2

我不确定这是否是您想要的：

http://jsfiddle.net/2Jrqe/1/

我加了两个a（上下）

干得好 ;）