以下是 jquery树型可收缩导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=gb2312" />
<title>jquery树型可收缩导航菜单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="style/zzsc.css" rel="stylesheet" type="text/css" />
<script src="Js/showList.js" type="text/javascript"></script>
</head>
<body>
<div>
<div class="main content">
<div class="left-sider">
<div class="operate">
<h3> 常见问题 </h3>
<ul id="J_navlist">
<li >
<h4 >下载安装</h4>
<div class="list-item none">
<p ><a href="#" target="_self">下载游戏</a></p>
<p ><a href="#" target="_self">运行与更新</a></p>
</div>
</li>
<li >
<h4 >注册登录</h4>
<div class="list-item none">
<p ><a href="#" target="_self">帐号问题</a></p>
<p ><a href="#" target="_self">密码问题</a></p>
<p ><a href="#" target="_self">其他登录问题</a></p>
</div>
</li>
<li >
<h4 >游戏充值</h4>
<div class="list-item none">
<p ><a href="#" target="_self">游戏卡充值</a></p>
<p ><a href="#" target="_self">第三方充值</a></p>
<p ><a href="#" target="_self">会员充值</a></p>
<p ><a href="#" target="_self">声讯充值</a></p>
<p ><a href="#" target="_self">通宝充值</a></p>
<p ><a href="#" target="_self">充值兑换</a></p>
<p ><a href="#" target="_self">充值到账</a></p>
</div>
</li>
<li >
<h4 >积分银子</h4>
<div class="list-item none">
<p ><a href="#" target="_self">银子获取</a></p>
<p ><a href="#" target="_self">银子兑换与转账</a></p>
<p ><a href="#" target="_self">银子使用</a></p>
<p ><a href="#" target="_self">积分相关问题</a></p>
</div>
</li>
<li >
<h4 >密码安全</h4>
<div class="list-item none">
<p ><a href="#" target="_self">登录密码</a></p>
<p ><a href="#" target="_self">保护密码</a></p>
<p ><a href="#" target="_self">支付密码</a></p>
</div>
</li>
<li >
<h4 >游戏相关</h4>
<div class="list-item none">
<p ><a href="#" target="_self">服装道具</a></p>
<p ><a href="#" target="_self">杀猪作弊</a></p>
<p ><a href="#" target="_self">游戏设置</a></p>
<p ><a href="#" target="_self">游戏规则</a></p>
<p ><a href="#" target="_self">游戏过程</a></p>
</div>
</li>
<li >
<h4 >其他问题</h4>
<div class="list-item none">
<p ><a href="#" target="_self">客服工作</a></p>
</div>
</li>
</ul>
<script type="text/javascript" language="javascript">
navList(12);
</script>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(showlist.js):
// JavaScript Documentfunction navList(id){
var $obj = $("#J_navlist"),$item = $("#J_nav_" + id);
$item.addClass("on").parent().removeClass("none").parent().addClass("selected");
$obj.find("h4").hover(function (){
$(this).addClass("hover");
}
,function (){
$(this).removeClass("hover");
}
);
$obj.find("p").hover(function (){
if ($(this).hasClass("on")){
return;
}
$(this).addClass("hover");
}
,function (){
if ($(this).hasClass("on")){
return;
}
$(this).removeClass("hover");
}
);
$obj.find("h4").click(function (){
var $div = $(this).siblings(".list-item");
if ($(this).parent().hasClass("selected")){
$div.slideUp(600);
$(this).parent().removeClass("selected");
}
if ($div.is(":hidden")){
$("#J_navlist li").find(".list-item").slideUp(600);
$("#J_navlist li").removeClass("selected");
$(this).parent().addClass("selected");
$div.slideDown(600);
}
else{
$div.slideUp(600);
}
}
);
}
CSS代码(zzsc.css):
@charset "utf-8";/* CSS Document */
html{overflow-y:scroll;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
/*定位*/
.none{display:none}
/*通用*/
.content{width:960px;}
.main{margin:15px auto 0 auto;overflow:hidden;zoom:1}
.main .left-sider{float:left;width:221px;}
.operate h3{font-family:"Microsoft YaHei",微软雅黑;font-size:16px;background:#f7f7f7;height:43px;line-height:43px;padding-left:12px;}
.operate ul li{display:inline;}
.operate ul li a{background:url(../images/bg1.png) no-repeat 200px 18px;padding-left:30px;text-decoration:none;font-size:14px;color:#555;display:block;height:43px;line-height:43px;border-bottom:1px dotted #d2d2d2;}
.operate ul li a.noline{border-bottom:none;}
.operate ul li a:hover{color:#8caf00;}
.operate ul li a.selected:hover{color:#fff;}
.operate ul li .selected{background-color:#8caf00;background-position:200px -9px;color:#fff;}
.operate ul li{border-bottom:1px dotted #d2d2d2;display:inline-block;width:100%;position:relative;min-height:43px;_height:43px;z-index:10;zoom:1}
.operate ul li h4{cursor:pointer;background:url(../images/bg3.png) no-repeat 200px 18px;padding-left:30px;text-decoration:none;font-size:14px;color:#555;display:block;line-height:43px;font-weight:normal;}
.operate ul li.noline{border-bottom:none;}
.operate ul li h4:hover{color:#8caf00;text-decoration:underline;}
.operate ul li.selected h4{background-position:200px -37px;border-bottom:1px dotted #d2d2d2;}
.operate ul li a{}
.operate ul li .on a{color:#8caf00;font-weight:bold;}
.operate ul li a:hover{color:#8caf00;text-decoration:underline;}
.bg-color{background-color:#8caf00;}
.operate li .list-item{padding:5px 0;position:relative;zoom:1}
.operate li .list-item p{padding-left:8px;background:url(../images/ico_li.png) no-repeat 60px center;}
.operate li .list-item a{background:none;border:none;color:#333333;display:block;height:32px;line-height:32px;margin:0 -1px 0 1px;padding-left:60px;position:relative;text-decoration:none;font-size:12px;}
.left-sider .operate{border:1px solid #eaeaea;zoom:1}
.left-sider .ser-online a{background:url(../images/bg_ser_online.jpg) no-repeat 0 0;margin-top:10px;height:75px;border:1px solid #eaeaea;display:block;}
分享到QQ
分享到微博
微信扫一扫
