Question

我需要你的帮助，

如果不使用长和代码资源密集型的jQuery和Javascript上下文菜单插件，那么如何使用简单的＆amp;简单的jQuery代码基本上采用我的div（具有id：＆＃39;右键单击菜单＆＃39;）并将右键单击操作绑定到另一个具有id：box1的div？

这是一个小提琴：http://jsfiddle.net/ALAHX/

以下是HTML标记：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#right-click-menu {
    width: 150px;
    border-top: 1px solid rgb(212,208,200);
    border-left: 1px solid rgb(212,208,200);
    border-right: 1px solid rgb(64,64,64);
    border-bottom: 1px solid rgb(64,64,64);
    font-family: tahoma;
    font-size: 8.5pt;
    box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
    list-style-type: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid rgb(128,128,128);
    border-bottom: 1px solid rgb(128,128,128);
    background: rgb(212,208,200);

    margin: 0;
    padding: 2px
}
#right-click-menu ul li {
    padding: 4px;
}
#right-click-menu li:hover {
    color: #fff;
    cursor: pointer;
    background: rgb(10,36,106);
}

</style>

</head>

<body>

    <div id="right-click-menu">
        <ul>

            <li>option1</li>
            <li>option2</li>
            <li>option3</li>
            <li>option4</li>        
        </ul>
    </div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>

</html>

Answer 1

$(document).ready(function(){
  $('div').click(function(){
     $('#box1').slideToggle('slow');
     }); 
});

也许是这样的？

Answer 2

使用Javascript：

$(document).ready(function() {
    $('#box1').mouseup(function(event) {
        if (event.which == 3) { // right click   
            $('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
        }
    });    
});

HTML：请务必在菜单中添加position: absolute以允许其移动，并oncontextmenu返回false以防止默认浏览器右键单击。

<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
    <ul>            
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
        <li>option4</li>        
    </ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>

小提琴：

http://jsfiddle.net/ALAHX/1/

您希望首先包含隐藏菜单以及选择选项时的内容，但这应该可以帮助您入门。

看着你的评论，你可能有也可能没有在你的项目中包含jQuery，这是一个Javascript插件。上面的代码是使用jQuery编写的，因此请确保在HTML中包含<script>链接。

制作自定义右键菜单并将其绑定到另一个div内部的右键单击

2 个答案: