快速简单的一个...为这个手风琴添加活动课程?

时间:2012-10-17 09:57:00

标签: jquery accordion

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

<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;
      });


});

非常感谢您的帮助......

2 个答案:

答案 0 :(得分:0)

试试这个......

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;
  });

答案 1 :(得分:0)

我不确定这是不是你想要的:

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

我添加了两个(上下)

你去;)