D│ 43 工业pptx│ 中国超级计算机mp4│ 新建文本文档py│ 空间太阳能电站mp4│ 纳米技术mp4│└─ │ 0exe │ 1bat │ doorexe │ 错误txt │ └─加密音乐解密软件 │ daf933914a50180f6d92workerjs │ faviconico │
<p>以下是一个简单的实现：</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可折叠的目录树</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-left: 20px;
position: relative;
}
li:before {
content: "+";
position: absolute;
left: -20px;
top: 0;
cursor: pointer;
}
li.folder:before {
content: "-";
}
ul ul {
display: none;
}
ul.expanded {
display: block;
}
</style>
</head>
<body>
<ul id="directory">
<li class="folder">D:
<ul>
<li>4.3 工业.pptx</li>
<li>中国超级计算机.mp4</li>
<li>新建文本文档.py</li>
<li>空间太阳能电站.mp4</li>
<li>纳米技术.mp4</li>
<li class="folder">加密音乐解密软件
<ul>
<li>daf933914a50180f6d92.worker.js</li>
<li>favicon.ico</li>
<li>index.html</li>
<li>manifest.json</li>
<li>precache-manifest.5df80a6e40c6a7e602f34fa21008d7e9.js</li>
<li>service-worker.js</li>
<li class="folder">css
<ul>
<li>app.58add593.css</li>
<li>chunk-vendors.8cf7dd44.css</li>
</ul>
</li>
<li class="folder">fonts
<ul>
<li>element-icons.535877f5.woff</li>
<li>element-icons.732389de.ttf</li>
</ul>
</li>
<li class="folder">img
<ul>
<li class="folder">icons
<ul>
<li>android-chrome-192x192.png</li>
<li>android-chrome-512x512.png</li>
<li>apple-touch-icon-152x152.png</li>
<li>favicon-16x16.png</li>
<li>favicon-32x32.png</li>
<li>msapplication-icon-144x144.png</li>
<li>safari-pinned-tab.svg</li>
</ul>
</li>
</ul>
</li>
<li class="folder">js
<ul>
<li>app.80cebe87.js</li>
<li>chunk-vendors.83c5f48e.js</li>
</ul>
</li>
<li class="folder">static
<ul>
<li>kgm.mask</li>
</ul>
</li>
</ul>
</li>
<li class="folder">文件夹2
<ul>
<li>文件1.txt</li>
<li>文件2.txt</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
// 为每个目录项添加事件监听器
document.querySelectorAll("li:before").forEach(function(arrow) {
arrow.addEventListener("click", function() {
// 切换展开/折叠状态
arrow.parentNode.classList.toggle("folder");
arrow.parentNode.classList.toggle("expanded");
});
});
</script>
</body>
</html>
<p>这个实现使用了 CSS 和 JavaScript。CSS 定义了目录树的样式，包括箭头的样式和展开/折叠状态的样式。JavaScript 为每个目录项的箭头添加了事件监听器，当用户点击箭头时，切换展开/折叠状态</p>
原文地址: https://www.cveoy.top/t/topic/fgZr 著作权归作者所有。请勿转载和采集!