html5手机导航展开与折叠,jQuery实现可展开折叠的导航效果示例

本文实例讲述了jQuery实现可展开折叠的导航效果。分享给大家供大家参考，具体如下：

Document

*{ padding: 0; margin: 0;}

li{ list-style-type: none;}

body{ margin: 50px; font-family:\5FAE\8F6F\96C5\9ED1,'Arial';}

a{ text-decoration: none; color:#f00;}

h3{ cursor: pointer;}

导航一

• 11111
• 11111
• 11111
• 11111

导航二

• 22222
• 22222
• 22222
• 22222

导航三

• 33333
• 33333
• 33333
• 33333

$(function(){

$.easing.def = 'easeOutElastic';

var oBtn = $('h3');

oBtn.click(function(){

$(this).next('ul').slideToggle().siblings('ul').slideUp();

});

});

运行效果图如下：

附：jquery.easing.1.3.js动画效果扩展插件可点击如下链接本站下载：

希望本文所述对大家jQuery程序设计有所帮助。