您的位置：首页 > 其它

一个简单的可折叠展开的树形目录

2016-10-21 18:58 316 查看

树形目录效果如下，点击每个项可以折叠和展开子项。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul li ul {
display:none;
}

</style>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(document).ready(function(e) {
$("ul li").click(function(e) {
$(this).children("ul").toggle();
e.stopPropagation(); //阻止冒泡事件
});
});
</script>
</head>

<body>
<ul>
<li>目录1
<ul>
<li>目录1.1
<ul>
<li>目录1.1.1</li>
<li>目录1.1.2</li>
</ul>
</li>
<li>目录1.2
<ul>
<li>目录1.2.1</li>
<li>目录1.2.2</li>
<li>目录1.2.3</li>
</ul>
</li>
<li>目录1.3
<ul>
<li>目录1.3.1</li>
<li>目录1.3.2</li>
<li>目录1.3.3</li>
</ul>
</li>
</ul>
</li>

<li>目录2
<ul>
<li>目录2.1</li>
<li>目录2.2</li>
<li>目录2.3</li>
</ul>
</li>

<li>目录3
<ul>
<li>目录3.1</li>
<li>目录3.2</li>
<li>目录3.3</li>
</ul>
</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航