前端使用javascript制作下拉式三级侧边菜单栏
时间: 2023-08-05 17:09:06 浏览: 43
好的,下面是一个简单的三级侧边菜单栏的示例代码:
```html
<div class="sidebar">
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a>
<ul>
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
<li><a href="#">三级菜单3</a></li>
</ul>
</li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
</ul>
</div>
```
接下来,我们使用 JavaScript 给菜单添加交互效果。首先,我们需要获取菜单中的所有一级菜单。可以使用 `querySelectorAll` 方法获取所有的 `li` 元素:
```js
const liElems = document.querySelectorAll('.sidebar li');
```
然后,我们需要给每个一级菜单添加点击事件,用来展开或收起二级菜单。在点击事件中,我们需要获取当前一级菜单的子元素 `ul`,并通过修改其 `display` 样式来实现展开或收起二级菜单:
```js
liElems.forEach((liElem) => {
const aElem = liElem.querySelector('a');
const ulElem = liElem.querySelector('ul');
aElem.addEventListener('click', (event) => {
event.preventDefault();
if (ulElem) {
ulElem.style.display = ulElem.style.display === 'none' ? 'block' : 'none';
}
});
});
```
最后,我们再为二级菜单中的每个一级菜单添加点击事件,用来展开或收起三级菜单。方法与上面类似。
完整的示例代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三级侧边菜单栏</title>
<style>
.sidebar {
width: 200px;
background-color: #eee;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin: 0;
padding: 0;
}
.sidebar a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.sidebar ul ul {
display: none;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li>
<a href="#">一级菜单1</a>
<ul>
<li>
<a href="#">二级菜单1</a>
<ul>
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
<li><a href="#">三级菜单3</a></li>
</ul>
</li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a></li>
<li><a href="#">一级菜单3</a></li>
</ul>
</div>
<script>
const liElems = document.querySelectorAll('.sidebar li');
liElems.forEach((liElem) => {
const aElem = liElem.querySelector('a');
const ulElem = liElem.querySelector('ul');
aElem.addEventListener('click', (event) => {
event.preventDefault();
if (ulElem) {
ulElem.style.display = ulElem.style.display === 'none' ? 'block' : 'none';
}
});
const subLiElems = liElem.querySelectorAll('ul li');
subLiElems.forEach((subLiElem) => {
const subAElem = subLiElem.querySelector('a');
const subUlElem = subLiElem.querySelector('ul');
subAElem.addEventListener('click', (event) => {
event.preventDefault();
if (subUlElem) {
subUlElem.style.display = subUlElem.style.display === 'none' ? 'block' : 'none';
}
});
});
});
</script>
</body>
</html>
```