我怎样才能让这个 JavaScript 下拉菜单来处理特定的文本

How could I get this JavaScript drop down to work on specific text

本文关键字：处理 下拉菜单 文本 JavaScript      更新时间：2023-09-26

基本上，该脚本的作用是当用户右键单击网页上的任意位置时，它会显示一个自定义下拉列表，但我对此感兴趣，以便它仅显示特定对象或div 上的自定义右键单击菜单。 不是这样出现在屏幕上的任何位置。感谢您的任何建议或演示。

剧本 

<script>
$(document).bind("contextmenu", function (event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
    top: event.pageY + "px",
    left: event.pageX + "px"
});
});
$(document).bind("mousedown", function (e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});
$(".custom-menu li").click(function(){
    // This is the triggered action name
    switch($(this).attr("data-action")) {
    // A case for each action. Your actions here
    case "first": alert("first"); break;
    case "second": alert("second"); break;
    case "third": alert("third"); break;
    }

    $(".custom-menu").hide(100);
   });
  </script>

身体

<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
Right click me

与上下文一起使用

$(document).on("contextmenu", ".rc", function (event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
    top: event.pageY + "px",
    left: event.pageX + "px"
});
});
$(document).bind("mousedown", function (e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});
$(".custom-menu li").click(function(){
    // This is the triggered action name
    switch($(this).attr("data-action")) {
    // A case for each action. Your actions here
    case "first": alert("first"); break;
    case "second": alert("second"); break;
    case "third": alert("third"); break;
    }
    $(".custom-menu").hide(100);
   });
.custom-menu{
   display:none;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<span class="rc">Here</span>
<span>Nope</span>

将第一个$(document)替换为$(".click_me")

.HTML：

<ul class='custom-menu'>
    <li data-action="first">First thing</li>
     <li data-action="second">Second thing</li>
    <li data-action="third">Third thing</li>
</ul>
<span class="click_me">Right click me</span>

克里特岛一个div 并将其标识为点击并放置您的内容 在div 中右键单击我！喜欢这个：-

<div id="click">Right click me</div>

而不是$(document).bind使用$("#click").bind

相关文章：