Javascript 如何制作多级上下文菜单？

我正在制作一个自定义上下文菜单，这是我的代码。这里我想添加一个多级自定义上下文

[img]

我尝试在这里附加两个li标签

var view=d3.选择（“#contextMenuNode”）

html（

）
查看此文件


$（文档）.ready（函数（）{
//显示上下文菜单：
$（文档）.上下文菜单（函数（e）{
//获取窗口大小：
var winWidth=$（document.width（）；
var winHeight=$（document.height（）；
//获取指针位置：
var posX=e.pageX；
var posY=e.pageY；
//获取上下文菜单大小：
var menuWidth=$（“.contextmenu”）.width（）；
var menuHeight=$（“.contextmenu”）.height（）；
//保证金：
var-secMargin=10；
//防止页面溢出：
如果（posX+menuWidth+secMargin>=winWidth&&
posY+menuHeight+secMargin>=winHeight）{
//案例1：右下溢流：
posLeft=posX-menuWidth-secMargin+“px”；
posTop=posY-menuHeight-secMargin+px；
}else if（posX+menuWidth+secMargin>=winWidth）{
//案例2：右溢出：
posLeft=posX-menuWidth-secMargin+“px”；
posTop=posY+secMargin+px；
}否则如果（posY+menuHeight+secMargin>=winHeight）{
//案例3：底部溢流：
posLeft=posX+secMargin+px；
posTop=posY-menuHeight-secMargin+px；
}否则{
//案例4：默认值：
posLeft=posX+secMargin+px；
posTop=posY+secMargin+px；
};
//显示上下文菜单：
$（“.contextmenu”）.css({
“左”：左，
“顶部”：后期
}).show（）；
//阻止浏览器默认上下文菜单。
返回false；
});
//隐藏上下文菜单：
$（文档）。单击（函数（）{
$（“.contextmenu”）.hide（）；
});
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html，
身体{
保证金：0；
填充：0；
背景：#DCE775；
字体系列：“Merriweather”，衬线；
}
h1{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
填充：1em；
字号：2em；
字母间距：.3em；
颜色：#FFFFFF；
文本对齐：居中；
边框顶部：2个实心#E6EE9C；
边框底部：2个实心#E6EE9C；
}
.上下文菜单{
显示：无；
位置：绝对位置；
宽度：200px；
保证金：0；
填充：0；
背景：#FFFFFF；
边界半径：5px；
列表样式：无；
盒影：0 15px 35px rgba（50,50,90,0.1），0 5px 15px rgba（0,0,0,0.07）；
z指数：999999；
}
李先生{
左边框：3倍实心透明；
过渡期：2秒；
}
.上下文菜单李a{
显示：块；
填充：10px；
颜色：#B0BEC5；
文字装饰：无；
过渡期：2秒；
}
.contextmenu li:悬停{
背景#CE93D8；
左边框：3px实心#9C27B0；
}
.contextmenu li:将鼠标悬停在a上{
颜色：#FFFFFF；
}
.子菜单{
显示：无；
}
鼠标悬停。子菜单{
显示：块；
位置：绝对位置；
顶部：0px；
宽度：200px；
右：-200px；
背景：#fff；
填充：0；
}
.子菜单li{
列表样式：无；
颜色：#B0BEC5；
}
.子菜单LIA{
颜色：#B0BEC5！重要；
}

右击！













请在您的问题中提供您的代码，而不仅仅是您想要实现的参考。每当我右键单击svgGlad时，我只是附加两个li标记，这很有帮助。唯一的问题是为什么子菜单之间有间隙，它显示间隙，因为我忘了添加填充：0；给第二个ul。我已经更新了代码片段。