[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<title>文件目录</title>
<style>
ul {
list-style-type: none;
}
ul ul {
display: none;
}
ul li:before {
content: "▶";
margin-right: 5px;
cursor: pointer;
}
ul li.active:before {
content: "▼";
}
ul li.active ul {
display: block;
}
</style>
</head>
<body>
<ul id="file-tree">
<li class="active">典藏L的中国
<ul>
<li>06.mp4</li>
<li>08.mp4</li>
<li>07.mp4</li>
<li>01.mp4</li>
<li>02.mp4</li>
<li>05.mp4</li>
<li>04.mp4</li>
<li>03.mp4</li>
</ul>
</li>
<li class="active">1本好书
<ul>
<li>一本好书
<ul>
<li>一本好书第一季 (9).mp4</li>
<li>一本好书第一季 (8).mp4</li>
<li>一本好书第一季 (6).mp4</li>
<li>一本好书第一季 (7).mp4</li>
<li>一本好书第一季 (5).mp4</li>
<li>一本好书第一季 (4).mp4</li>
<li>一本好书第一季 (3).mp4</li>
<li>一本好书第一季 (12).mp4</li>
<li>一本好书第一季 (2).mp4</li>
<li>一本好书第一季 (1).mp4</li>
<li>一本好书第一季 (10).mp4</li>
<li>一本好书第一季 (11).mp4</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var tree = document.getElementById('file-tree');
tree.addEventListener('click', function(e) {
var target = e.target;
if (target.tagName === 'LI') {
target.classList.toggle('active');
var ul = target.querySelector('ul');
if (ul) {
ul.style.display = ul.style.display === 'none' ? '' : 'none';
}
}
});
</script>
</body>
</html> | 
发表于 2024-7-1 10:28
|
发表于 2024-7-2 11:23
|楼主
收藏
淘帖
有用
分享到朋友圈
