jQuery实现手风琴风格收缩展开导航菜单代码示例
分享一段代码实例,它实现了手风琴效果,可以伸缩的下拉导航菜单。
掌握菜单的实现原理才是最重要的,下面就详细分析一下它的实现过程。
代码实例如下:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>jQuery实现手风琴风格收缩展开导航菜单代码示例-搞代码gaodaiama.com</title> <style> /*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; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp(); $(this).children('ul').slideToggle(); tmp = this; }); $con.click(function(){ return false; // 阻止事件冒泡 }); }); </script> </head> <body> <div class="sidebar"> <ul> <li class="title"> <span>一、HTML5基础教程</span> <ul class="in-sidebar"> <li><a target="_blank" href="http://www.gaodaima.com">HTML5基础教程1</a></li> <li><a href="#">HTML5基础教程2</a></li> <li><a href="#">HTML5基础教程3</a></li> <li><a href="#">HTML5基础教程4</a></li> <li><a href="#">HTML5基础教程5</a></li> </ul> </li> <li class="title"><span>二、CSS3基础教程</span> <ul class="in-sidebar"> <li><a href="#">CSS3基础教程1</a></li> <li><a href="#">CSS3基础教程2</a></li> <li><a href="#">CSS3基础教程3</a></li> <li><a href="#">CSS3基础教程4</a></li> <li><a href="#">CSS3基础教程5</a></li> </ul> </li> <li class="title"> <span>三、Javascript基础教程</span> <ul class="in-sidebar"> <li><a href="#">Javascript基础教程1</a></li> <li><a href="#">Javascript基础教程2</a></li> <li><a href="#">Javascript基础教程3</a></li> <li><a href="#">Javascript基础教程4</a></li> <li><a href="#">Javascript基础教程5</a></li> </ul> </li> <li class="title"><span>四、NodeJs基础教程</span> <ul class="in-sidebar"> <li><a href="#">NodeJs基础教程1</a></li> <li><a href="#">NodeJs基础教程2</a></li> <li><a href="#">NodeJs基础教程3</a></li> <li><a href="#">NodeJs基础教程4</a></li> <li><a href="#">NodeJs基础教程5</a></li> </ul> </li> <li class="title"><span>五、IOS基础教程</span> <ul class="in-sidebar"> <li><a href="#">IOS基础教程1</a></li> <li><a href="#">IOS基础教程2</a></li> <li><a href="#">IOS基础教程3</a></li> <li><a href="#">IOS基础教程4</a></li> <li><a href="#">IOS基础教程5</a></li> </ul> </li> </ul> </div> </body> </html> |
上面的代码实现了手风琴下拉菜单效果,下面详细介绍一下它的实现过程。
一.代码注释:
(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
(2).var tmp = null,声明一个变量并赋初值为null,它用来存储当前点击的标题元素(class属性值为title)的this索引。
(3).$title = $('.title'),获取class属性值为title的元素,也可以叫做标题元素,其实就是每一个菜单的父元素。
(4).$con = $('.title > ul'),获取下面的ul元素。
(5).$title.click(function(){
$(tmp).children('ul').slideUp();
$(this).children('ul').slideToggle();
tmp = this;
}),为标题元素注册click事件处理函数。
$(tmp).children('ul').slideUp(),会把上一个点击展开的菜单隐藏。
$(this).children('ul').slideToggle(),如果菜单展开则隐藏,如果隐藏则展开。
tmp = this,将当前的this对象引用赋值给tmp。
(6).$con.click(function(){
return false; // 阻止事件冒泡
}),阻止时间冒泡,否则点击链接也会产生菜单展开和隐藏效果。
本文案例为大家展示了《jQuery实现手风琴风格收缩展开导航菜单代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。
原创文章,转载请注明: 转载自搞代码
本文链接地址: jQuery实现手风琴风格收缩展开导航菜单代码示例

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论