Question

在我的MVC 4应用程序中，我正在使用jquery处理ContextMenus，同时也取得了相当多的成就，但目前我一直面临着问题。

我使用contextmenu的观点之一如下所示： enter image description here

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

 <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>
}

以及实现此目的的脚本是：

jQuery(document).ready(function($){
    $('a.mylinks').addcontextmenu('contextmenu1') 
})

我也加入了一个jscontextmenu js文件来使其正常工作。

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

我尝试了一些可能性，使用计数器并递增它然后将类分配给脚本函数但是没有用。所以任何人都可以提出实现这一目标的方法。谢谢。

Answer 1

为每个上下文菜单生成唯一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>
}

在你的js代码中：

jQuery(function () {
    jQuery('a.mylinks').each(function () {
        var id = jQuery(this).next('.jqcontextmenu').attr('id');
        jQuery(this).addcontextmenu(id);
    });
});

JSFiddle Demo

Answer 2

是时候让事情变得现实了，是时候添加一些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>

上面的代码非常简单。首先，我们将上下文菜单监听器绑定到文档，以便我们可以处理它。 startFocusOut()功能用于监控丢失的焦点或监控关闭菜单。如果发生了单击，则将隐藏上下文菜单。列表项上的单击侦听器用于执行所选操作

Answer 3

可能这样的事情应该有效吗？

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

使用Jquery上下文菜单

3 个答案: