jQuery制作效果超棒的手风琴折叠菜单

这篇文章主要介绍了jQuery制作效果超棒的手风琴折叠菜单的效果，这里推荐给大家，有需要的小伙伴可以参考下

拉风的jQuery制作的手风琴折叠菜单，效果非常不错!这里是之前版本的改进版，主要是jquery代码改进

演示图：

main.js

 $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up'); $(this).children('ul').slideToggle().end().children('.arrow').addClass('arrow-up'); tmp = this; }); $con.click(function(){ return false;  // 阻止事件冒泡 }); });

index.html

   jquery js css html   一、HTML5基础教程 HTML5基础教程1
HTML5基础教程2
HTML5基础教程3
HTML5基础教程4
HTML5基础教程5
二、CSS3基础教程 CSS3基础教程1
CSS3基础教程2
CSS3基础教程3
CSS3基础教程4
CSS3基础教程5
三、Javascript基础教程 Javascript基础教程1
Javascript基础教程2
Javascript基础教程3
Javascript基础教程4
Javascript基础教程5
四、NodeJs基础教程 NodeJs基础教程1
NodeJs基础教程2
NodeJs基础教程3
NodeJs基础教程4
NodeJs基础教程5
五、IOS基础教程 IOS基础教程1
IOS基础教程2
IOS基础教程3
IOS基础教程4
IOS基础教程5

style.css

 /*globle*/ ul, li{ margin: 0; padding: 0; list-style-type: none; } a{ display: inline-block; width: 100%; height: 31px; text-decoration: none; color: #fff; font-size: 13px; } a:hover{ background: #52718A; } /*sidebar*/ .sidebar{ width: 210px; height: 335px; margin: 50px auto; border-radius: 5px; font: 14px '新宋体'; color: #f4f4f4; } .title{ width: 95%; line-height: 32px; border-bottom: 1px solid #ccc; background: #1ABC9C; cursor: pointer; } .title > span{ margin-left: 10px; } /*in-sidebar*/ .in-sidebar{ width: 100%; display: none; } .in-sidebar > li{ width: 100%; height: 32px; background: #34495E; line-height: 32px; text-align: center; border-bottom: 1px solid #ddd; } /*arrow*/ .arrow{ float: right; display: inline-block; margin-right: 5px; width: 20px; height: 32px; background: url(../img/down.png-600) no-repeat center; } .arrow-up{ background: url(../img/up.png-600) no-repeat center; }

以上所述就是本文给大家分享的全部内容了，希望能够对大家学习jQuery有所帮助。

以上就是jQuery制作效果超棒的手风琴折叠菜单的详细内容，更多请关注0133技术站其它相关文章！