使用jquery的上下文菜单

Context menu using jquery

本文关键字：菜单 上下文 jquery 使用      更新时间：2023-09-26

我在Right Click上的jquery中有一个上下文菜单。

但不知何故，这并不能满足我的需求。

当我点击添加新的div，然后尝试对其进行上下文菜单操作时，它就不起作用了。

它正在对原始分区应用操作。

有人能帮我解决这个问题并改进我的Jquery或HTMI吗。

Js小提琴上下文菜单

感谢

正如marck所说，您的代码中有很多错误。您多次在多个元素上使用相同的ID。不管怎样，我创建了一个基本的jsfiddle来描述你想要实现的目标。您可以在此基础上进行构建，并根据需要进行修改。

以下是链接：http://jsfiddle.net/PCLwU/

function add(){
 //For adding new items.
}
function menu(){
//to show up context menu
}
function menuactions(){
//Define the actions performed when menu option is selected.
}

对于不同列表的不同上下文菜单：http://jsfiddle.net/PCLwU/3/

上下文菜单div

<div id='contextMenu'>                         
    <ul id='items'>                        
            <li id="cutDoc">Cut</li>
            <li id="copyDoc">Copy</li>
            <li id="pasteDoc">Paste</li>
            <li id="deleteDocs">Delete</li>
   </ul>
</div>

菜单样式

<style>
    #items
    {
      list-style: none;
      margin: 5px  0 0 5px;
    }
    #contextMenu
    {
      display: none;
      position: fixed;       
      border: 1px solid grey;
      width: 150px;
      background-color:white;
      box-shadow: 2px 2px 1px grey;
    }
    #items li
    {
      list-style-type: none;      
      border-bottom: 1px solid grey;
      border-bottom-style: dotted;
      padding: 10px;
      font-size: 14px; 
    } 
    #items :hover
    {
      background: #0070FF;     
      color: white;
    }
</style>

jQuery在需要哪个的区域应用的脚本

$("YOur class name").mousedown(function(e){
        //to block browsers default right click
        if( e.button == 2 ) {
            $("#contextMenu").css("left", e.pageX);
            $("#contextMenu").css("top", e.pageY);
            $("#contextMenu").fadeIn(500, startFocusOut());
        }
      });
     function startFocusOut() {
            $(document).on("click", function () {   
                $("#contextMenu").hide(500);
                $(document).off("click");           
            });
        }

这会很好用的。

更新：

这是小提琴演示

相关文章：