Javascript 使用Jquery上下文菜单

在我的MVC4应用程序中，我正在使用jquery处理ContextMenus，并取得了相当大的成就，但目前我一直面临一些问题

我使用contextmenu的一个视图如下所示：

我需要在右键单击每个元素（例如：第一个文档、Doc1等）时添加一些菜单（即移动、删除、详细信息），我对应的razor源为：

 <div class="row">
   @foreach (var item in Model)
     {
        <div id="dc-row-@item.Id" class="col-sm-3 ">
        <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

   <ul id="contextmenu1" class="jqcontextmenu">
     <li><a href="#">Item 1a</a></li>
     <li><a href="#">Item 2a</a></li>
     <li><a href="#">Item 3a</a>
       <ul>
         <li><a href="#">Sub Item 3.1a</a></li>
         <li><a href="#">Sub Item 3.2a</a></li>
         <li><a href="#">Sub Item 3.3a</a></li>
      </ul>
    </li>
 </ul>
}

此外，我还包括了一个jscontextmenu js文件，以使其正常工作

但这里我的问题是，我能够实现仅对第一个元素的右键单击。我觉得使用document ready函数，contextmenu1的id将仅应用于第一个元素，为了针对列表中的所有名称分配该id，我需要为ul创建一些动态id然后在我的脚本中使用它

我尝试了一些可能性，使用一个计数器并递增它，然后将类分配给脚本函数，但没有成功。

---

因此，任何人都可以建议实现此目的的方法。提前感谢。

为每个上下文菜单生成唯一的id:

@foreach (var item in Model) {
    <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

    <ul id="contextmenu-@item.Id" class="jqcontextmenu">
        <li><a href="#">Item 1a</a></li>
        <li><a href="#">Item 2a</a></li>
        <li><a href="#">Item 3a</a></li>
    </ul>
}

---

.

是时候让事情变得现实了，是时候添加一些jQuery了。试试这个

 <br>
$(document).bind(“contextmenu”, function (e) {<br>
    e.preventDefault();                 // To prevent the default context menu.<br>
    $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.<br>
    $(“#cntnr”).css(“top”, e.pageY);    // <br>
    $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.<br>
});<br>
function startFocusOut() {<br>
    $(document).on(“click”, function () {   <br>
        $(“#cntnr”).hide(500);              // To hide the context menu<br>
        $(document).off(“click”);           <br>
    });<br>
}<br>
$(“#items > li”).click(function () {<br>
    $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.<br>
});<br><br>

$（文档）.bind（“上下文菜单”，函数（e）{

e、 preventDefault（）；//阻止默认上下文菜单。

$（“#cntnr”）.css（“left”，e.pageX）；//用于更新菜单位置。

$（“#cntnr”）.css（“top”，e.pageY）；/

$（“#cntnr”）.fadeIn（500，startFocusOut（））；//用于在图片中显示上下文菜单。

});

函数startFocusOut（）{

$（文档）。在（“单击”，函数（）{

$（“#cntnr”）.hide（500）；//隐藏上下文菜单的步骤

$（文档）.off（“单击”）；

})；

}

$（“#items>li”）。单击（函数（）{

$（“#op”）.text（“您已选择“+$（this）.text（））；//执行所选函数。

})；

---

上面的代码非常简单。首先，我们将上下文菜单侦听器绑定到文档，以便处理它。

startFocusOut（）

功能用于监控焦点丢失或监控菜单外单击。如果发生该单击，则上下文菜单将被隐藏。列表项上的“单击侦听器”用于执行所选操作

可能类似的操作会起作用

jQuery(document).ready(function($){
   $('a.mylinks li')[0].addcontextmenu('contextmenu1') 
 })

---

为每个无效链接（通过

@foreach

）生成id为

contextmenu1

的

ul

，因为id应该是唯一的。请尝试将其从

@foreach

中删除。删除

ul

的id，并像这样附加contextmenu:

$（'a.mylinks'）。添加contextmenu（$（'a.mylinks'）。下一步（'.jqcontextmenu'））

@ROX-我想这样我就无法为每个元素分配右键单击菜单。而且，右键单击时，我需要将该元素的Id发送给控制器。那么，您能确认一下吗？@MelanciaUK，根据您的评论，我从ul中删除了Id，并在我的脚本中添加了您的建议删除了前面的Id。但是现在右键点击菜单选项没有被列出。如果没有看到一个运行代码进行调试的示例，很难猜测。我看到你的小提琴工作得很好，这就是我想要的，但在所有这些之后它仍然不工作。我一直在使用jqcontextmenu.css和jqcontextmenu.js作为src来完成这项工作。请指导我还需要做什么..on右键单击默认的MS链接是可见的。Ya..its there..Uncaught TypeError:无法读取未定义的属性“id”。@Saroj您的

元素和

应该相邻（如我的示例中）。或者尝试以下操作：

var id=jQuery（this）。最近（'.row'）。查找（'.jqcontextmenu'）。attr（'id'）；

 <br>
$(document).bind(“contextmenu”, function (e) {<br>
    e.preventDefault();                 // To prevent the default context menu.<br>
    $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.<br>
    $(“#cntnr”).css(“top”, e.pageY);    // <br>
    $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.<br>
});<br>
function startFocusOut() {<br>
    $(document).on(“click”, function () {   <br>
        $(“#cntnr”).hide(500);              // To hide the context menu<br>
        $(document).off(“click”);           <br>
    });<br>
}<br>
$(“#items > li”).click(function () {<br>
    $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.<br>
});<br><br>

jQuery(document).ready(function($){
   $('a.mylinks li')[0].addcontextmenu('contextmenu1') 
 })