用html写一个无序列表,每个列表下有div元素,点击时候隐藏或显示div 用js方法实现
时间: 2023-05-20 12:06:23 浏览: 54
可以使用以下代码实现:
```html
<ul>
<li>
Item 1
<div class="content">Content 1</div>
</li>
<li>
Item 2
<div class="content">Content 2</div>
</li>
<li>
Item 3
<div class="content">Content 3</div>
</li>
</ul>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
const content = item.querySelector('.content');
item.addEventListener('click', () => {
content.classList.toggle('hidden');
});
});
</script>
<style>
.content {
display: none;
}
.content.hidden {
display: block;
}
</style>
```
这段代码会创建一个无序列表,每个列表项下面有一个 div 元素,初始时 div 元素是隐藏的。当用户点击列表项时,对应的 div 元素会显示或隐藏。这个效果是通过给 div 元素添加或移除 `hidden` 类来实现的,而这个类的样式是在 CSS 中定义的。