D3.js树形图多下拉菜单冲突：点击新节点旧下拉未关闭

看起来你遇到的问题是点击不同叶子节点的箭头时，之前打开的下拉菜单不会自动关闭，导致多个菜单同时展示。这个问题很好解决，核心思路是在打开新菜单前先关闭所有已打开的菜单，同时可以添加全局点击关闭的逻辑优化体验。

步骤1：统一下拉菜单的类名 #

首先确保所有的下拉菜单元素都有一个共同的类名，比如node-dropdown，这样我们可以用D3一次性选中所有菜单。假设你创建下拉菜单的代码类似这样：

// 示例：创建下拉菜单时添加统一类名和唯一ID
nodeEnter.append('div')
  .attr('class', 'node-dropdown')
  .attr('id', d => `dropdown-${d.topic_id || d.name}`) // 用节点唯一标识做ID
  .style('display', 'none')
  .html(d => `
    <div>节点名称：${d.name}</div>
    <button class="delete-btn">删除</button>
  `);

步骤2：编写关闭所有菜单的通用函数 #

创建一个函数来关闭所有已打开的下拉菜单，这样我们可以在需要的时候调用它：

function closeAllDropdowns() {
  d3.selectAll('.node-dropdown').style('display', 'none');
}

步骤3：修改箭头点击事件逻辑 #

在你绑定箭头点击事件的代码里，先调用关闭所有菜单的函数，再处理当前菜单的显示/隐藏：

// 假设你的箭头元素类名为arrow-icon，绑定点击事件
d3.selectAll('.arrow-icon').on('click', function(event, d) {
  // 先关闭所有已打开的菜单
  closeAllDropdowns();
  
  // 找到当前节点对应的下拉菜单
  const currentDropdown = d3.select(`#dropdown-${d.topic_id || d.name}`);
  
  // 切换当前菜单的显示状态（如果需要点击箭头可以切换开关，而不是只打开）
  const isHidden = currentDropdown.style('display') === 'none';
  currentDropdown.style('display', isHidden ? 'block' : 'none');
  
  // 阻止事件冒泡，避免触发后续的全局点击关闭逻辑
  event.stopPropagation();
});

步骤4：添加全局点击关闭逻辑（可选但推荐） #

为了提升用户体验，添加点击页面其他区域时关闭所有菜单的逻辑：

d3.select('body').on('click', function() {
  closeAllDropdowns();
});

为什么这样有效？ #

之前的代码没有处理"关闭其他菜单"的逻辑，每次点击新节点只会触发当前菜单的显示，旧菜单的状态不会被修改。通过在打开新菜单前统一关闭所有菜单，就能确保同一时间只有一个下拉菜单处于显示状态。

另外，使用节点的唯一标识（比如topic_id或name）作为下拉菜单的ID，能保证我们精准定位到当前点击节点对应的菜单，避免操作错误。

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