【发布时间】：2022-06-28 02:02:54
【问题描述】：
我正在使用 jQuery 数据表，在右键单击时，我想显示一个带有子菜单的菜单。 菜单显示正常，但是子菜单离主菜单很远
我正在为菜单和子菜单创建列表
HTML 就像：
//Context menu
$(document).contextmenu({
delegate: ".divRightClick",
menu: "#callOptions"
});.ui-icon {
background-position: left !important;
background-image: none !important;
}
.ui-icon-dial {
background-image: url('/images/BOContact_16x16.png') !important;
margin-top: 5px;
}
.ui-menu-item-wrapper .ui-state-active .ui-icon {
background-image: url('/images/BOContact_16x16.png') !important;
border: none !important;
background: #FCFDFD !important;
cursor: pointer;
overflow: no-display;
width: 100px !important;
}
.ui-icon-work {
background-image: url('/images/work.png') !important;
margin-top: 5px;
}
.ui-icon-home {
background-image: url('/images/telephone.png') !important;
margin-top: 30px;
}
.ui-icon-cell {
background-image: url('/images/Phone_16x16.png') !important;
margin-top: 57px;
}
.ui-menu .ui-menu-item {
margin-left: 25px !important;
margin-top: 5px !important;
}
.ui-menu .ui-front {
margin-left: -10px !important;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: #FCFDFD !important;
/*font-weight: bold !important;*/
/*color: #ffffff !important;*/
/* border: 1px solid #580201;*/
cursor: pointer;
overflow: no-display;
width: 80% !important;
color: #000000 !important;
}
.ui-icon .ui-icon-work .ui-menu-item-wrapper .ui-state-active {
background-image: url('/images/work.png') !important;
/*font-weight: bold !important;*/
/*color: #ffffff !important;*/
/* border: 1px solid #580201;*/
cursor: pointer;
overflow: no-display;
width: 80% !important;
color: #000000 !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: none;
font-weight: normal;
color: #000000 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ui-contextmenu/1.18.1/jquery.ui-contextmenu.min.js"></script>
<body>
<div class="divRightClick"></div>
<ul id="callOptions" style="width: 144px; border: 1px solid #000000 !important; display:none;">
<li>
<div><span class="ui-icon ui-icon-dial"></span>Dial</div>
<ul aria-expanded="false" class="clsCallMenu" style="top: 10px; left: 120.5px; display: none;" aria-hidden="true">
<li data-command="Work">
<div><span class="ui-icon-work" id="ui-id-3" tabindex="-1" role="menuitem"></span>Work</div>
</li>
<li data-command="Home">
<div><span class="ui-icon-home" id="ui-id-4" tabindex="-1" role="menuitem"></span>Home</div>
</li>
<li data-command="Cell">
<div><span class="ui-icon-cell" id="ui-id-5" tabindex="-1" role="menuitem"></span>Cell</div>
</li>
</ul>
</li>
<li>
<div><span class="ui-icon "></span>Quick Email</div>
</li>
<li>
<div><span class="ui-icon "></span>Refresh</div>
</li>
</ul>
</body>我试图将我的代码添加到 sn-p 中，但是，我遇到了脚本错误，并且看起来 contextMenu.js 给出了 404 错误。在我的实际代码中，我没有收到此错误
【问题讨论】：
-
请提供一个最小的、可重现的例子：stackoverflow.com/help/minimal-reproducible-example
-
经过进一步调查，您必须同时包含 jQuery 和 jQuery UI 才能使用此库。查看 Git：github.com/mar10/jquery-ui-contextmenu/wiki
-
主要问题是您的 CSS 代码正在创建额外的边距并导致子菜单被推到更右侧。
标签： jquery css jquery-ui contextmenu jquery-contextmenu