js折叠式菜单下拉列表
时间: 2023-10-07 19:12:46 浏览: 103
你可以使用 HTML、CSS 和 JavaScript 来创建折叠式菜单下拉列表。下面是一个基本的示例:
HTML 代码:
```
<div class="menu">
<button class="menu-btn">菜单</button>
<ul class="menu-list">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
```
CSS 代码:
```
.menu-btn {
display: block;
background-color: #ccc;
border: none;
padding: 10px;
cursor: pointer;
}
.menu-list {
display: none;
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
margin-bottom: 5px;
}
.menu-list li a {
display: block;
padding: 5px;
background-color: #f0f0f0;
text-decoration: none;
color: #333;
}
```
JavaScript 代码:
```
var menuBtn = document.querySelector('.menu-btn');
var menuList = document.querySelector('.menu-list');
menuBtn.addEventListener('click', function() {
if (menuList.style.display === 'none') {
menuList.style.display = 'block';
} else {
menuList.style.display = 'none';
}
});
```
在这个示例中,通过使用 CSS 的 `display` 属性来控制下拉菜单的显示和隐藏。在 JavaScript 中,我们添加了一个事件监听器来处理按钮的点击事件,并根据下拉菜单的当前状态来切换菜单的显示和隐藏。