点击展示隐藏列表html
时间: 2023-07-11 11:39:57 浏览: 40
可以使用以下代码实现点击展示和隐藏列表:
HTML代码:
```html
<button id="toggle-list">显示/隐藏列表</button>
<ul id="my-list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
CSS代码:
```css
/* 初始状态为隐藏 */
#my-list {
display: none;
}
```
JavaScript代码:
```javascript
// 获取按钮和列表元素
const toggleBtn = document.getElementById("toggle-list");
const list = document.getElementById("my-list");
// 点击按钮时切换列表的可见性
toggleBtn.addEventListener("click", () => {
if (list.style.display === "none") {
list.style.display = "block";
} else {
list.style.display = "none";
}
});
```
以上代码中,我们首先使用 CSS 将列表元素的初始状态设置为隐藏。在 JavaScript 部分,我们获取了按钮和列表元素,并且使用 `addEventListener` 方法为按钮添加了一个点击事件监听器。当按钮被点击时,我们检查列表元素的显示状态,如果是隐藏的,则将其显示,否则将其隐藏。这样就可以实现点击展示和隐藏列表的功能。