jquery实现简单手风琴菜单效果实例

jquery实现简单手风琴菜单效果实例_jquery

php中文网

发布： 2016-05-16 15:55:10

原创

1461人浏览过

本文实例讲述了jquery实现简单手风琴菜单效果的方法。分享给大家供大家参考。具体实现方法如下：

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

登录后复制

HTML代码：

<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>

登录后复制

SCSS部分：

绿色简单后台模板

绿色简单后台模板，绿色风格，含登录页面及后台操作页面，界面简单，操作方便，且后台还是DIV+CSS实现，菜单的动态效果没完成，我想只要会一点点JS应该就可以做出来了。

127

查看详情

/* 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程序设计有所帮助。