js 中实现HTML的二级菜单显示,可以手动折叠,可以手动打开
时间: 2024-03-02 08:49:25 浏览: 30
你可以使用HTML、CSS和JavaScript来实现HTML的二级菜单显示,并且可以手动折叠和打开。
首先,在HTML中创建二级菜单的标记结构,例如:
```html
<ul class="menu">
<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>
<ul>
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
</ul>
```
然后,使用CSS样式来隐藏所有的子菜单:
```css
.menu ul {
display: none;
}
```
接下来,使用JavaScript来实现手动打开和折叠子菜单的功能。可以通过给菜单项绑定事件来实现:
```javascript
var menuItems = document.querySelectorAll('.menu > li');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
var subMenu = this.querySelector('ul');
if (subMenu) {
if (subMenu.style.display === 'none') {
subMenu.style.display = 'block';
} else {
subMenu.style.display = 'none';
}
}
});
}
```
这段代码会为所有菜单项添加点击事件,当点击菜单项时,会获取其下的子菜单并判断其是否隐藏,如果是,则将其显示出来,否则将其隐藏起来。
最后,你可以根据需要对CSS和JavaScript进行进一步的调整以满足你的需求。
相关推荐
![](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)