jQuery点击展开收缩垂直菜单代码
2017-02-17 11:43
701 查看
jquery点击展开收缩垂直菜单代码
源地址:http://sc.chinaz.com/jiaoben/141023014290.htm
源地址:http://sc.chinaz.com/jiaoben/141023014290.htm
<!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> <script type="text/javascript" src="js/jquery.min.js"></script> <link href="css/style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @charset "utf-8"; body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;} p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;} ul,ol{margin:0px;padding:0px;list-style-type:none;} img{border:none;} a{color:#333333;text-decoration:none;} a:hover{color:#666666;text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} *html .clearfix{height:1%} .clearfix{display:block} *+html .clearfix{min-height:1%} /* ny_zb */ .ny_zb{width:268px;overflow:hidden;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;font-family:"微软雅黑";margin:40px auto 0 auto;} .ny_zbbt{background-color:#f1f1f1;height:40px;line-height:40px;overflow:hidden;border-top:2px solid #b7b7b7;} .ny_zbbt span{padding-left:30px;font-size:16px;color:#000;line-height:40px;} .ny_zblb1{padding:10px 10px 20px 0px;} .ny_zblb1 li{line-height:33px;font-size:14px;color:#333;float:left;width:100%;} .ny_zblb1 li a{display:block;padding-left:30px;text-decoration:none;color:#333;background:url(./images/04.gif) no-repeat right;} .ny_zblb1 li a.cur{color:#6fb600;font-weight:bold;background:url(./images/04_h.gif) no-repeat right;text-decoration:none;} .ny_zblb1 li ul{display:none;color:#666;padding:5px 0 5px 30px;} .ny_zblb1 li ul li{float:none;background-image:none;height:26px;line-height:26px;margin-top:0px;font-size:12px;} .ny_zblb1 li ul li a{padding-left:30px;display:block;background:url(../images/05.gif) no-repeat left;} .ny_zblb1 li ul a:hover{color:#6fb600;} </style> </head> <body> <script type="text/javascript"> $(function () { $(".ny_zblb1 ul li").click(function(){ var thisSpan=$(this); $(".ny_zblb1 ul li ul").prev("a").removeClass("cur"); $("ul", this).prev("a").addClass("cur"); $(this).children("ul").slideDown("fast"); $(this).siblings().children("ul").slideUp("fast"); }) }); </script> <div class="ny_zb"> <div class="ny_zbbt"><span>产品类别</span></div> <div class="ny_zblb1"> <ul class="clearfix"> <li> <a class="cur" href="javascript:void(0)">精选水果</a> <ul style="display:block;"> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">田园时蔬</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">精品肉类</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">海鲜水产</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">健康乳品</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">五谷杂粮</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">美酒饮料</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> <li> <a href="javascript:void(0)">休闲小食</a> <ul> <li><a href="http://sc.chinaz.com/">进口水果</a></li> <li><a href="http://sc.chinaz.com/">国产水果</a></li> <li><a href="http://sc.chinaz.com/">水果色拉</a></li> <li><a href="http://sc.chinaz.com/">水果礼盒</a></li> </ul> </li> </ul> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> <p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> </div> </body> </html>
相关文章推荐
- jQuery点击收缩展开滑动显示内容竖直手风琴代码
- jquery实现可点击伸缩与展开的菜单效果代码
- jQuery 淡入淡出、展开收缩菜单实现代码
- 基于jQuery代码实现圆形菜单展开收缩效果
- jQuery实现可收缩展开的级联菜单实例代码
- jQuery 淡入淡出、展开收缩菜单实现代码
- jquery实现可点击伸缩与展开的菜单效果代码
- jQuery实现可收缩展开的级联菜单实例代码
- jQuery 淡入淡出、展开收缩菜单实现代码
- Jquery 菜单点击,划过换背景色代码
- 基于jQuery垂直多级导航菜单代码
- jQuery淡入淡出、展开收缩菜单
- jQuery插件treeview点击节点名称不展开、收缩节点 分类: JavaScript 2014-06-16 20:28 539人阅读 评论(0) 收藏
- jQuery 导航菜单点击伸缩展开效果的JS特效
- jQuery入门学习六:可收缩展开的级联菜单
- jQuery垂直多级导航菜单代码分享
- 如果自定义一个可以点击之后展开/收缩的菜单组件
- jQuery弹性展开收缩菜单插件gooey.js
- jQuery图片的展开和收缩实现代码
- jQuery 点击展开180度菜单