Javascript 处理d3中的多个下拉列表

我已经编写了一个代码，用于在图形中显示数据。在每个叶节点中，都有一个向下箭头图标，单击该图标时应显示该节点的下拉列表，并显示其名称和删除操作等信息。单击节点的向下箭头图标时，我可以显示下拉列表。但是问题是，如果我点击x节点，会显示该x节点的下拉列表，现在如果我点击y节点，y的下拉列表会与该x节点一起显示，因为x节点没有关闭。下面是演示的片段

var数据={
“名称”：root@gmail.com",
“儿童”：[{
“主题id”：31572，
“姓名”：“人名1”，
“儿童”：[{
“主题id”：31573，
“名称”：“分行4.1分行4.1”
}, {
“主题id”：31574，
“名称”：“分支机构4.2”
}, {
“主题id”：31575，
“名称”：“分支机构4.2”
},
{
“主题id”：31576，
“名称”：“分支机构4.2”
}, {
“主题id”：31577，
“名称”：“分支机构4.2”
},
{
“主题id”：31578，
“名称”：“分支机构4.2”
}
]
}, {
“主题id”：32572，
“姓名”：“人名2”，
“儿童”：[{
“主题id”：33572，
“名称”：“分支机构4.1”
}, {
“主题id”：34572，
“名称”：“分支机构4.2”
}, {
“主题id”：35572，
“名称”：“分支机构4.2”
},
{
“主题id”：36572，
“名称”：“分支机构4.2”
}, {
“主题id”：37572，
“名称”：“分支机构4.2”
},
{
“主题id”：38572，
“名称”：“分支机构4.2”
}
]
}, {
“主题id”：41572，
“姓名”：“人名3”，
“儿童”：[{
“主题id”：51572，
“名称”：“分支机构4.1”
}, {
“主题id”：61572，
“名称”：“分支机构4.2”
}, {
“主题id”：71572，
“名称”：“分支机构4.2”
},
{
“主题id”：81572，
“名称”：“分支机构4.2”
}, {
“主题id”：91572，
“名称”：“分支机构4.2”
},
{
“主题id”：92572，
“名称”：“分支机构4.2”
}
]
}, {
“姓名”：“人名4”，
“儿童”：[{
“名称”：“分支机构4.1”
}, {
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}
]
}]
};
const LAST_CHILDREN_WIDTH=13；
让flagForChildren=false；
设群=[]；
data.children.forEach（d=>{
设a=[]；
如果（d.children.length>0）{
flagForChildren=true；
}
for（设i=0；i=6）{
子对象=对象。分配（子对象{
儿童：[{
姓名：“…”
}]
});
}
a、 推（儿童）；
}
}
d、 儿童=a；
组：推（d）；
});
data.children=组；
让split_index=Math.round（data.children.length/2）；
矩形高度=45；
让leftData={
name:data.name，
children:JSON.parse（JSON.stringify（data.children.slice（0，split_索引）））
};
让leftDataArray=[]；
leftDataArray.push（leftData）；
//正确的数据
设rightData={
name:data.name，
children:JSON.parse（JSON.stringify（data.children.slice（split_index）））
};
//创建d3层次结构
设right=d3.层次结构（rightData）；
left=d3.层次结构（leftData）；
//渲染两棵树
drawTree（右，“右”）；
drawTree（左，“左”）；
//画一棵树
函数绘图树（根，位置）{
让开关_CONST=1；
如果（位置==“左”）{
开关常数=-1；
}
常量边距={
前20名，
右:120,，
底数：20，
左：120
},
宽度=window.innerWidth-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
设svg=d3
.选择（“svg”）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（'view-box'，'0'+（宽度+边距.右侧）+''+（高度+边距.顶部+边距.底部））
.style（“页边空白顶部”、“20px”）
.样式（“左边距”、“88px”）；
常量myTool=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“我的工具提示”）
.style（“不透明度”、“0”）
.样式（“显示”、“无”）；；
//将整棵树的宽度移动一半
设g=svg.append（“g”）.attr（“transform”，“translate”（+width/2+”，0）”）；
让deductWidthValue=flagForChildren？0：宽度*0.33；
//创建新的默认树布局
设tree=d3
.tree（）
//设定大小
//记住树是旋转的
//因此，高度用作宽度
//宽度等于高度
.尺寸（[高度-50，开关常数*（宽度-扣除宽度值）/2]）
.分离（（a，b）=>a.parent===b.parent？4:4.25）；
树（根）；
让nodes=root.substands（）；
让links=root.links（）；
//将两个根节点设置为垂直死点
节点[0].x=height/2；
//创建链接
设link=g
.selectAll（“.link”）
.数据（链接）
.enter（）；
链接
.附加（“行”）
.attr（“类”，函数（d）{
如果（d.target.depth==2）{
返回“链接”
}否则{
返回“硬链接”
}
})
.attr（“x1”，函数（d）{
如果(
d、 target.depth==3
) {
返回0；
}
返回d.source.y+100/2；//d.source.y+100/2
})
.attr（“x2”，函数（d）{
如果(
d、 target.depth==3
) {
返回0；
}else if（d.target.depth==2）{
返回d.target.y；
}
返回d.target.y+100/2；//d.target.y+100/2；
})
.attr（“y1”，函数（d）{
如果(
d、 target.depth==3
) {
返回0；
}
返回d.source.x+50/2；
})
.attr（“y2”，功能（d）{
如果(
d、 target.depth==3
) {
返回0；
d3.selectAll("foreignObject").filter(function(d){
        return el.data.topic_id !== d.data.topic_id
    })
    .select("ul")
    .classed("show", false);