如何讓手風琴活躍的項目可點擊

Question

經過幾個小時的試用和錯誤，我意識到我應該真的瞭解jQuery的基礎知識。有人可以幫我解答一個簡單的問題嗎？

我正在將this手風琴放到一個頁面中，但我希望活動面板能夠點擊關閉。有什麼簡單的方法可以做到這一點嗎？

(function($) { 

    //Hide all panels 
    var allPanels = $('.accordion > dd').hide(); 

    //Show first panel 
    $('.accordion > dd:first-of-type').show(); 

    //Add active class to first panel 
    $('.accordion > dt:first-of-type').addClass('accordion-active'); 

    //Handle click function 
    jQuery('.accordion > dt').on('click', function() { 

    //this clicked panel 
    $this = $(this); 

    //the target panel content 
    $target = $this.next(); 

    //Only toggle non-displayed 
    if(!$this.hasClass('accordion-active')){ 

     //slide up any open panels and remove active class 
     $this.parent().children('dd').slideUp(); 

     //remove any active class 
     jQuery('.accordion > dt').removeClass('accordion-active'); 

     //add active class 
     $this.addClass('accordion-active'); 

     //slide down target panel 
     $target.addClass('active').slideDown(); 

    } 

    return false; 
    }); 

})(jQuery); 

Answer 1

嘗試：

jQuery('.accordion > dt').on('click', function() { 
     //this clicked panel 
     var $this = $(this), 
      $target = $this.next(); 

     //slide up any open panels and remove active class 
     $this.parent().children('dd').not($target).slideUp(); //Slide Up everything but the target one 

     //remove any active class 
     jQuery('.accordion > dt').removeClass('accordion-active'); 
     //add active class 
     $this.addClass('accordion-active'); 
     //slide down target panel 
     $target.addClass('active').slideToggle(); 

    return false; 
    }); 

Demo

而實際上可以簡化這：

jQuery('.accordion > dt').on('click', function() { 
     var $this = $(this) , 
      $target = $this.next(); 

     $('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active'); 

     $this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp(); 

     return false; 
    }); 

Demo