js点击一个列表隐藏其它列表
时间: 2024-03-10 20:48:56 浏览: 18
可以通过以下步骤实现:
1. 给每个需要隐藏的列表添加相同的 class 名称,比如 "hide-list"。
2. 使用 JavaScript 监听点击事件,获取被点击的列表元素。
3. 使用 DOM 操作方法获取所有带有 "hide-list" class 名称的列表元素。
4. 遍历所有 "hide-list" 元素,将除被点击的列表外其它列表元素的 display 样式设置为 "none"。
以下是示例代码:
HTML 代码:
```
<ul>
<li class="hide-list">列表 1</li>
<li class="hide-list">列表 2</li>
<li class="hide-list">列表 3</li>
<li class="hide-list">列表 4</li>
</ul>
```
JavaScript 代码:
```
// 获取所有带有 "hide-list" class 名称的列表元素
const hideLists = document.querySelectorAll('.hide-list');
// 监听点击事件
document.addEventListener('click', (event) => {
const clickedList = event.target;
// 判断被点击的元素是否为列表元素
if (clickedList.classList.contains('hide-list')) {
// 遍历所有 "hide-list" 元素
hideLists.forEach((list) => {
// 将除被点击的列表外其它列表元素的 display 样式设置为 "none"
if (list !== clickedList) {
list.style.display = 'none';
}
});
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)