使用forEach绑定下拉菜单点击事件时，所有list_panel同时显示的问题

我懂你的困扰——现在点任意一个下拉箭头，所有面板都一起弹出来了，这肯定不是你想要的效果。问题就出在你的循环逻辑里：你遍历了全部list_panel元素，把它们的display都设成了block，自然会让所有面板同时显示。

我们要做的是，只显示当前点击箭头对应的那一个面板，可以利用DOM的层级关系精准定位目标面板——每个list_arrow和对应的list_panel都在同一个.drop_down_list容器里，只要找到当前箭头的父容器，就能在容器内找到对应的面板。

先看你的原始代码：

原始HTML #

<div class="drop_down_list"> 
  <span class="list_label">Menu1</span> 
  <span class="list_arrow"></span> 
  <ul class="list_panel"> 
    <li>List1</li> 
    <li>List1</li> 
    <li>List1</li> 
  </ul> 
</div> 
<div class="drop_down_list"> 
  <span class="list_label">Menu2</span> 
  <span class="list_arrow"></span> 
  <ul class="list_panel"> 
    <li>List2</li> 
    <li>List2</li> 
    <li>List2</li> 
  </ul> 
</div> 
<div class="drop_down_list"> 
  <span class="list_label">Menu3</span> 
  <span class="list_arrow"></span> 
  <ul class="list_panel"> 
    <li>List3</li> 
    <li>List3</li> 
  </ul> 
</div>

原始JavaScript（存在问题的代码） #

list_arrow.forEach(function (target) { 
  target.addEventListener('click', function () { 
    for(var i = 0; i < list_panel.length ; i++){ 
      list_panel[i].style.display = 'block'; 
    } 
  }); 
});

修正后的JavaScript代码 #

// 先获取所有箭头和面板元素
const list_arrow = document.querySelectorAll('.list_arrow');
const list_panel = document.querySelectorAll('.list_panel');

list_arrow.forEach(function (arrow) { 
  arrow.addEventListener('click', function () { 
    // 找到当前点击箭头所在的父容器
    const parentContainer = this.parentNode;
    // 在父容器内定位对应的下拉面板
    const targetPanel = parentContainer.querySelector('.list_panel');
    
    // 实现点击切换显示/隐藏的逻辑（如果只需要打开不需要收起，替换成下一行注释代码）
    targetPanel.style.display = targetPanel.style.display === 'block' ? 'none' : 'block';
    
    // 仅点击打开面板的写法：
    // targetPanel.style.display = 'block';
  }); 
});

代码说明 #

1. this.parentNode：获取当前点击箭头的父容器.drop_down_list，缩小操作范围到当前菜单内。
2. parentContainer.querySelector('.list_panel')：精准找到当前菜单下的唯一面板，避免影响其他菜单。
3. 切换逻辑：我加了点击箭头可以打开/关闭面板的功能，如果你只需要点击打开面板，把切换代码换成直接设置display: 'block'即可。

如果想要更完善的体验，还可以添加“点击页面其他区域关闭所有面板”的逻辑，不过这属于额外优化，你可以根据需求自行补充。

内容的提问来源于stack exchange，提问作者Artkiller