用js实现折叠菜单
时间: 2024-02-01 20:14:08 浏览: 38
好的,以下是一个简单的实现:
HTML代码:
```html
<div class="menu">
<div class="menu-header" onclick="toggleMenu()">点击展开菜单</div>
<div class="menu-items" style="display:none;">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
</div>
```
CSS代码:
```css
.menu-header {
background-color: #ccc;
padding: 10px;
cursor: pointer;
}
.menu-items {
background-color: #eee;
padding: 10px;
}
```
JavaScript代码:
```js
function toggleMenu() {
var menuItems = document.querySelector('.menu-items');
if (menuItems.style.display === 'none') {
menuItems.style.display = 'block';
} else {
menuItems.style.display = 'none';
}
}
```
这个实现中,当点击菜单头部时,通过切换菜单项的 `display` 样式属性来实现菜单的展开和折叠。
相关推荐
![](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)