jquery手风琴导航菜单特效
浏览数：46 /
时间：2015年06月09日
实用jQuery可折叠收缩导航菜单特效代码，可折叠二级导航菜单特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery可折叠菜单-素材吧</title> <link href="css/jscss.css" type="text/css" rel="stylesheet"> <script src="js/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".subNav").click(function(){ $(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd") $(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt") // 修改数字控制速度， slideUp(500)控制卷起速度 $(this).next(".navContent").slideToggle(500).siblings(".navContent").slideUp(500); }) }) </script> </head> <body> <!-- 代码 开始 --> <div class="subNavBox"> <div class="subNav currentDd currentDt">新闻中心</div> <ul class="navContent " style="display:block"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">关于我们</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">业务系统</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">招商加盟</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> </div> <!--以下代码并不是素材部分，请自主删除以下代码--> <style> .pull-left{ float:left; display:inline; margin-left:10px; font-size:12px;} .footjbl{ width:700px; margin:0 auto;position:fixed; bottom:20px; } </style> <div class="footjbl"> <ul class="dropdown-menu nav-category" style="padding-top: 10px;"> <li class="pull-left"><a href="http://www.sucai888.com" target="_blank">素材吧:</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/tubiaosucai" target="_blank">图标</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/texiao" target="_blank">网页特效</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/moban" target="_blank">网页模板</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/psdsucai" target="_blank">PSD素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/shiliangsucai" target="_blank">矢量素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/html5css3" target="_blank">HTML5</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/zitixiazai" target="_blank">字体下载</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/gaoqingtupiansucai" target="_blank">高清图片</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/default" target="_blank">更多分享</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/pin/lastest" target="_blank">最新素材</a></li> <li class="pull-left"><a href="http://www.sucai888.com/pin/hot" target="_blank">最热素材</a></li> </ul> </div></body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
