菜单伸缩实例
Posted 天--安静
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了菜单伸缩实例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单伸缩实例</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var $dt=$("dl#two dt.two2");
$dt.nextAll("dd,span").slideUp();
$dt.click(function(){
$dt.prevAll("dd,span").slideUp();
$dt.nextAll("dd,span").slideDown();
});
$("dl#two dt.two1").click(function(){
var $self=$(this);
$dt.prevAll("dd,span").slideDown();
$dt.nextAll("dd,span").slideUp();
});
});
</script>
<style>
*{padding:0;margin:0;color:#000;}
a{text-decoration:none;}
dl{background:#eee;width:100px;}
dt{font-weight:bold;cursor:pointer;}
dt,dd{width:100px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
</style>
</head>
<body>
<dl id="two">
<dt class="two1">指标库管理</dt>
<dd><a href="javascript:void(0)">单项工程指标</a></dd>
<dd><a href="javascript:void(0)">综合指标</a></dd>
<dd><a href="javascript:void(0)">单元指标</a></dd>
<span class="">
<dd><a href="javascript:void(0)">分部分项指标</a></dd>
<dd><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd><a href="javascript:void(0)">指标审核</a></dd>
<dd><a href="javascript:void(0)">我的共享指标</a></dd>
<dt class="two2">市政管理</dt>
<dd><a href="javascript:void(0)">单项工程指标</a></dd>
<dd><a href="javascript:void(0)">综合指标</a></dd>
<dd><a href="javascript:void(0)">单元指标</a></dd>
<span>
<dd><a href="javascript:void(0)">分部分项指标</a></dd>
<dd><a href="javascript:void(0)">工程量指标</a></dd>
</span>
<dd><a href="javascript:void(0)">指标审核</a></dd>
<dd><a href="javascript:void(0)">我的共享指标</a></dd>
</dl>
</body>
</html>
以上是关于菜单伸缩实例的主要内容，如果未能解决你的问题，请参考以下文章