Javascript 如何在表格行jQuery中创建3点下拉按钮

我使用一个表格，我需要在表格行中创建3点下拉列表，我尝试了一些库和自定义下拉列表，但效果不好

我想要这样的东西：

我试图使用这个库，但由于某种原因它不起作用

我创建下拉菜单：

HTML:

菜单项1
菜单项2
菜单项3
...

然后我将类添加到td

<td class="context-menu" data-container-id="context-menu-items" data-row-id="1"></td>

---

表中显示了3个点，但单击“不响应”时，代码没有问题。确保包含所有必需的CSS和JS文件

片段：

$（文档）.ready（函数（）{
var tableContextMenu=新建ContextMenu（“上下文菜单项”，menuItemClickListener）；
});
功能菜单项ClickListener（菜单项，父项）{
警报（“单击的菜单项：“+Menu\u Item.text（）+”\n记录ID:“+parent.attr”（“数据行ID”））；
}

*{
z指数：0；
}
输入{
z指数：0；
}
身体{
填充顶部：10px；
z指数：0；
}
.集装箱{
边际上限：0；
填充顶部：0；
}
.标题{
背景：3万人；
/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#300000%，#d50000 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#300000%，#d50000 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#300000%，#d50000 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#a30000'，endColorstr='#d50000'，GradientType=0）；
/*IE6-9*/
填充物：5px；
颜色：白色；
字体大小：粗体；
边界半径：5px；
}
页脚{
填充顶部：100px；
}
#错误工具箱{
位置：绝对位置；
宽度：自动；
高度：自动；
边界半径：5px；
显示：无；
填充：8px；
背景色：#403537；
z指数：9999；
颜色：白色；
盒影：4px4p5pRGBA（0,0,0,0.40）；
}
.货柜台{
显示：表格；
}
.垂直中心行{
显示：表格单元格；
垂直对齐：中间对齐；
}
.导航栏包装{
页边距底部：0！重要；
填充底部：0！重要；
}
.navbar xs{
最小高度：40px；
高度：40px；
z指数：3000；
}
.navbar xs.navbar品牌{
填充：0px 12px；
字体大小：16px；
线高：40px；
z指数：3000；
}
.navbar xs.navbar nav>li>a{
填充顶部：0px；
垫底：0px；
线高：37px；
z指数：3000；
}
/*
*覆盖引导模式类z索引，以确保其始终高于导航
*通常只有第二个导航有问题（不是主网站导航）
*/
.莫代尔{
z指数：5000！重要；
}
#顶栏{
边缘顶部：5px；
宽度：850px；
边缘底部：20px；
垫底：20px；
}
.linkButton{
宽度：自动；
浮动：左；
边界半径：5px；
填充物：5px；
背景色：#E0DFE5；
边际上限：0px；
右边距：3倍；
左边距：3倍；
}
.linkButton img{
宽度：15px；
高度：15px；
右边距：5px；
垂直对齐：中心对齐；
}
.commentContainer{
背景色：#E5E1E1；
填充：8px；
边缘顶部：30px；
边界半径：5px；
}
.行项目{
边框底部：实心薄#7E7C7F！重要；
边缘底部：10px！重要；
}
比斯塔格先生{
字体大小：x-small；
字体大小：粗体；
背景色：#A40000；
颜色：白色；
边框：实心薄黑色；
边界半径：5px；
填充：3倍；
宽度：115px；
文本对齐：居中；
垂直对齐：底部对齐；
底部：0；
}
.appContainer{
背景色：#f0；
宽度：200px；
高度：120px；
边框：实心薄#8585；
-webkit过渡：背景色0.5s轻松；
-moz过渡：背景色0.5s；
-ms过渡：背景色0.5s；
-o型过渡：背景色0.5s；
过渡：背景色0.5s；
光标：手；
光标：指针；
显示：内联块；
保证金：5px；
填充物：5px；
}
.appContainer:悬停{
背景色：#d7d7d7；
}
.appContainer.title{
字体大小：粗体；
文本对齐：居中；
}
.appContainer.appID{
文本对齐：居中；
}
.appIDContainer{
宽度：180px；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.数据容器{
背景色：#323436；
填充：10px；
颜色：白色；
边缘顶部：20px；
边缘底部：20px；
}
.data container>p.title{
字体大小：粗体；
文本对齐：居中；
}
.数据容器表{
颜色：黑色！重要；
}
.data container table>tbody>tr:n个子项（偶数）{
背景色：#c4c4c4；
}
.data container table>tbody>tr:not（：第一个子项）：悬停{
不透明度：1；
背景色：#e1e1；
过渡：不透明度。55秒缓进缓出；
-moz过渡：不透明度。55秒缓进缓出；
-webkit过渡：不透明度。55秒易入易出；
}
.关联菜单：在{
内容：'\2807'；
字体大小：20px；
光标：指针；
光标：手；
指针事件：全部；
}
td.上下文菜单：在{
浮动：对；
}
p、 上下文菜单：在>范围之后{
边距：0！重要；
填充：0！重要；
}
h1.上下文菜单：之后，
h2.上下文菜单：之后，
h3.上下文菜单：之后，
h4.上下文菜单：在，
h5.上下文菜单：之后{
左边距：30px；
}
.上下文菜单容器{
背景色：白色；
z指数：1000！重要；
边界半径：5px；
位置：绝对位置；
显示：无；
边框：实心薄黑色；
填充：3倍；
-webkit盒阴影：4px4px8px0pxRGBA（0,0,0,0.18）；
-moz盒阴影：4px4px8px0pxrgba（0,0,0,0.18）；
盒影：4px4px8px0pxRGBA（0,0,0,0.18）；
最小宽度：90px；
}
.上下文菜单容器>ul{
保证金：0；
填充：0；
列表样式类型：无；
}
.上下文菜单容器>ul>li{
填充物：5px；
光标：手；
光标：指针；
边界半径：5px；
}
.上下文菜单container>ul>li:悬停{
背景色：#C4；
}

项目1
项目2
项目3

第1列
第2列
项目1
项目2
项目3
项目4

这里是

<td class="context-menu" data-container-id="context-menu-items" data-row-id="1"></td>