jquery単純アコーディオンメニュー効果の実装例

本稿では,jqueryが単純アコーディオンメニュー効果を実現する方法について述べた.皆さんの参考にしてください.具体的な実現方法は以下の通りである.

(function($) {
 var allPanels = $('.accordion > dd').hide();
 $('.accordion > dt > a').click(function() {
  allPanels.slideUp();
  $(this).parent().next().slideDown();
  return false;
 });
})(jQuery);

HTMLコード:

Panel 1
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Panel 2
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel 3
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.
SCSSセクション:

/* Sorry if you don't use SASS. Should be pretty easy to convert. */
.accordion {
  margin: 50px; 
  dt, dd {
   padding: 10px;
   border: 1px solid black;
   border-bottom: 0;
   &:last-of-type {
    border-bottom: 1px solid black;
   }
   a {
    display: block;
    color: black;
    font-weight: bold;
   }
  }
 dd {
   border-top: 0;
   font-size: 12px;
   &:last-of-type {
    border-top: 1px solid white;
    position: relative;
    top: -1px;
   }
 }
}

本文で述べたことが皆さんのjQueryプログラム設計に役立つことを願っています.