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

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


(function($) {
var allPanels = $('.accordion > dd').hide();
$('.acc
文章正文

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

1
2
3
4
5
6
7
8
(function($) {
 var allPanels = $('.accordion > dd').hide();
 $('.accordion > dt > a').click(function() {
  allPanels.slideUp();
  $(this).parent().next().slideDown();
  return false;
 });
})(jQuery);

HTML代码：

1
2
3
4
5
6
7
8
<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部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 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程序设计有所帮助。
代码注释
上一篇仅使用CSS做到完全居中的超级攻略下一篇win7防火墙怎么关防火墙关闭命令执行步骤

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！