[javascript]代码库
<!DOCTYPE html>
<html>
<head>
<title>
一个很精简的js二级导航栏
</title>
<style type="text/css">
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
color: #333;
display: block;
padding: 10px 20px;
text-decoration: none;
}
nav ul li ul {
background-color: #fff;
border: 1px solid #ccc;
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
padding: 10px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
display: block;
margin: 10px 0;
}
nav ul li ul li a {
display: block;
padding: 5px 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About us</a>
<ul>
<li>
<a href="#">Our team</a>
</li>
<li>
<a href="#">Our history</a>
</li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</nav>
<script type="text/javascript">
// 获取所有有下拉菜单的导航栏元素
var navItems = document.querySelectorAll('nav ul li');
// 遍历导航栏元素
for (var i = 0; i < navItems.length; i++) {
var navItem = navItems[i];
var subMenu = navItem.querySelector('ul');
// 如果当前导航栏元素有下拉菜单
if (subMenu) {
// 为导航栏元素添加可收缩的事件监听器
navItem.addEventListener('click', function (event) {
event.preventDefault();
subMenu.classList.toggle('active');
});
}
}
</script>
</body>
</html>
[代码运行效果截图]
会python真的可以为所欲为0(回)
218天前
这里还有人吗1(回)
404天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
628天前
鸽子
0(回)
712天前
