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部分：

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

您可能感兴趣的文章:

• Mootools 1.2 手风琴（Accordion）教程
• 基于jquery的slideDown和slideUp做手风琴
• 基于JQuery的一句话搞定手风琴菜单
• 原生js做的手风琴效果的导航菜单
• jquery实现手风琴效果实例代码
• 全面解析Bootstrap手风琴效果
• Angular.js与Bootstrap相结合实现手风琴菜单代码