只显示当前ul的其他li
时间: 2024-03-13 15:48:23 浏览: 22
如果你想让button只显示当前ul中的其他li,可以将ul和button包裹在一个父元素中,并给每个ul和button都添加一个类名或者ID。
HTML代码:
```
<div class="list-container">
<ul class="list">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ul>
<button class="show-list">显示列表</button>
</div>
<div class="list-container">
<ul class="list">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ul>
<button class="show-list">显示列表</button>
</div>
```
JavaScript代码:
```
const showListButtons = document.querySelectorAll('.show-list');
showListButtons.forEach(function(button) {
button.addEventListener('click', function() {
const list = button.previousElementSibling;
const listItems = list.querySelectorAll('li');
listItems.forEach(function(item) {
item.style.display = 'block';
});
});
});
```
这样,当用户点击button时,只有当前ul中的其他li会显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)