js 中实现HTML的二级菜单显示,可以手动折叠,可以手动打开,打开使用一下向下的箭头,合起来使用一个向上的箭头
时间: 2024-03-03 09:48:33 浏览: 23
你可以使用 HTML、CSS 和 JavaScript 来实现这个功能。首先,你需要创建一个 HTML 结构来表示菜单。例如:
```html
<ul class="menu">
<li>
<a href="#">菜单项 1</a>
<ul class="sub-menu">
<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>
<ul class="sub-menu">
<li><a href="#">子菜单项 1</a></li>
<li><a href="#">子菜单项 2</a></li>
<li><a href="#">子菜单项 3</a></li>
</ul>
</li>
</ul>
```
然后,你可以使用 CSS 来控制菜单的样式,包括菜单项和子菜单的显示与隐藏。例如:
```css
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu > li {
position: relative;
}
.menu > li > a {
display: block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.menu > li > .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 10px;
background-color: #eee;
border: 1px solid #ccc;
}
.menu > li:hover > .sub-menu {
display: block;
}
.menu > li > a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
vertical-align: middle;
border-top: 5px solid #333;
border-right: 5px solid transparent;
border-bottom: 0 solid transparent;
border-left: 5px solid transparent;
}
.menu > li.open > a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
vertical-align: middle;
border-top: 0 solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333;
border-left: 5px solid transparent;
}
```
上面的 CSS 代码控制了菜单的一些基本样式,例如菜单项的背景色、字体颜色和鼠标悬浮时子菜单的显示。同时,它还使用了伪元素 `::after` 来添加向下的箭头。
接下来,你需要使用 JavaScript 来添加事件处理程序,使得菜单项可以手动展开和折叠。例如:
```js
const menuItems = document.querySelectorAll(".menu > li");
menuItems.forEach((menuItem) => {
const subMenu = menuItem.querySelector(".sub-menu");
if (subMenu) {
menuItem.addEventListener("click", () => {
menuItem.classList.toggle("open");
});
}
});
```
上面的 JavaScript 代码首先获取所有菜单项,并遍历每个菜单项。如果菜单项包含子菜单,就给它添加一个点击事件处理程序。点击时,它会切换菜单项的 `open` 类来控制子菜单的显示与隐藏。同时,你还需要修改 CSS,添加 `.menu > li.open > .sub-menu` 类的样式来控制向上的箭头的显示。
```css
.menu > li.open > .sub-menu {
display: block;
}
.menu > li.open > a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
vertical-align: middle;
border-top: 0 solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333;
border-left: 5px solid transparent;
}
```
这样,你就可以实现一个具有手动展开和折叠功能,带有向上和向下箭头的菜单了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)