jquery點擊展開收縮垂直菜單代碼
源地址：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>