HTML+CSS+JS 实现财务报表左侧导航栏，支持多级展开收缩和图标展示
<!DOCTYPE html>
<html>
<head>
<title>财务报表</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
nav {
width: 200px;
height: 100%;
background-color: #333;
position: fixed;
top: 0;
left: 0;
padding: 20px;
box-sizing: border-box;
color: #fff;
font-size: 16px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
position: relative;
padding: 10px 0;
cursor: pointer;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
}
nav ul li.active {
background-color: #666;
}
nav ul li.active > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #666;
padding: 0;
margin: 0;
width: 200px;
box-sizing: border-box;
border-left: 2px solid #fff;
}
nav ul ul li {
padding: 10px;
cursor: pointer;
}
nav ul ul li:hover {
background-color: #444;
}
nav ul ul li.active {
background-color: #444;
}
nav ul ul li.active > ul {
display: block;
}
nav ul ul ul {
top: 0;
left: 100%;
border-left: 2px solid #fff;
}
.content {
margin-left: 220px;
padding: 20px;
}
/* 添加图标样式 */
nav ul li a:before {
content: url('图标地址');
margin-right: 10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="active">
<a href="#">财务报表1</a>
<ul>
<li><a href="#">财务报表1-1</a></li>
<li><a href="#">财务报表1-2</a></li>
<li><a href="#">财务报表1-3</a></li>
</ul>
</li>
<li>
<a href="#">财务报表2</a>
<ul>
<li><a href="#">财务报表2-1</a></li>
<li><a href="#">财务报表2-2</a></li>
<li>
<a href="#">财务报表2-3</a>
<ul>
<li><a href="#">财务报表2-3-1</a></li>
<li><a href="#">财务报表2-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">财务报表3</a>
<ul>
<li><a href="#">财务报表3-1</a></li>
<li><a href="#">财务报表3-2</a></li>
<li><a href="#">财务报表3-3</a></li>
</ul>
</li>
<li>
<a href="#">财务报表4</a>
<ul>
<li><a href="#">财务报表4-1</a></li>
<li><a href="#">财务报表4-2</a></li>
<li><a href="#">财务报表4-3</a></li>
</ul>
</li>
</ul>
</nav>
<div class="content">
<h1>财务报表内容</h1>
<p>这里是财务报表的内容。</p>
</div>
<script>
var navItems = document.querySelectorAll('nav ul li');
<pre><code> for (var i = 0; i < navItems.length; i++) {
if (navItems[i].querySelector('ul')) {
navItems[i].classList.add('dropdown');
navItems[i].querySelector('ul').classList.add('sub-menu');
navItems[i].insertAdjacentHTML('beforeend', '<span class="arrow">&#9660;</span>');
}
}
var dropdownToggles = document.querySelectorAll('nav ul li.dropdown > a, nav ul li.dropdown > span.arrow');
for (var i = 0; i < dropdownToggles.length; i++) {
dropdownToggles[i].addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.classList.toggle('active');
});
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nQ1j 著作权归作者所有。请勿转载和采集!