使用JQuery层次选择器实现树形菜单的收缩/展开特效
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js">//版本需一致
</script>
<script type="text/javascript">
$(function() {
$(".menu ul").css("display","none");//先让ul的格式隐藏起来,效果就是没有了li那一栏
$(".menu a").on("click",function(){//on事件是"on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。"具体格式等等,可以用文档查找,索引搜索关键词:on,即可.
$(this).next().toggle();//toggle是类似开关的显示隐藏效果,具体移步文档.
});
});
</script>
<!--隐藏无序列表的格式
这里为了简便化,尽量给文字进行a标签化.
另外,不论是table,还是dl,dt,dd都可以运用这种方式.
-->
<style type="text/css">
ul,li{
list-style-type: none;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">个人报表</a>
<ul>
<li>
<a href="#">文件一</a>
<ul>
<li>
<a href="#">文档1</a>
</li>
<li>
<a href="#">文档2</a>
</li>
</ul>
<ul>
<li>
<a href="#">文档1</a>
</li>
<li>
<a href="#">文档2</a>
</li>
</ul>
</li>
<li>
<a href="#">文件二</a>
<ul>
<li>
<a href="#">文档1</a>
</li>
<li>
<a href="#">文档1</a>
</li>
</ul>
</li>
<li>
<a href="#">文件三</a>
<ul>
<li>
<a href="#">文档1</a>
</li>
<li>
<a href="#">文档1</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">个人收藏</a>
</li>
<li>
<a href="#">我的分享</a>
</li>
<li>
<a href="#">图库</a>
</li>
<li>
<a href="#">成长记录</a>
</li>
<li>
<a href="#">账户信息</a>
</li>
</ul>
</body>
</html>```