jquery简单树形菜单代码

梦里梦外; 2022-07-15 05:07 174阅读 0赞

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>