使用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>```