jquery简单树形菜单代码

来源：互联网发布：tp-link产品工程师知乎编辑：程序博客网时间：2024/05/21 04:41
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><meta name="keywords" content="www.cnblogs.com/jihua"/><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 h3 i{ float:right;}.ny_zblb1 li h3 i.a{color:#6fb600;}.ny_zblb1 li h3 i.b{color:#f24000;}.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><script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script><script type="text/javascript"> // 树状菜单 $(document).ready(function () {$(".ny_zblb1 ul li").click(function(){var thisSpan=$(this);$(".ny_zblb1 ul li ul").prev().find("i").removeClass("b");$("ul", this).prev().find("i").addClass("b");$(this).children("ul").slideDown("fast");$(this).siblings().children("ul").slideUp("fast");}) });</script></head><body><div class="ny_zb"><div class="ny_zbbt"><span>产品类别</span></div><div class="ny_zblb1"><ul class="clearfix"><li><h3><a href="javascript:void(0)">精选水果<i class="a b">展开</i></a></h3><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><h3><a href="javascript:void(0)">田园时蔬<i class="a">展开</i></a></h3><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><h3><a href="javascript:void(0)">精品肉类<i class="a">展开</i></a></h3><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><h3><a href="javascript:void(0)">海鲜水产<i class="a">展开</i></a></h3><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><h3><a href="javascript:void(0)">健康乳品<i class="a">展开</i></a></h3><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><h3><a href="javascript:void(0)">五谷杂粮<i class="a">展开</i></a></h3><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></body></html>
0 0