2016-02-10 49 views
0

基本上這個腳本是做什麼時,當用戶右鍵單擊網頁上的任何地方,它顯示一個自定義下拉列表,但我有興趣使這個,只有顯示在特定對象或div上自定義右鍵單擊菜單。不會出現在屏幕上的任何地方。 Thankyou提供任何建議或演示。我怎麼能得到這個JavaScript下拉工作在特定的文字

腳本

<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 

回答

1

與上下文

$(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>

+0

謝謝你的迴應,解決了該問題,並再次感謝大家的支持和應用演示你的問題 – Johnny

1

替換第一$(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> 
0

克里特島一個div和id用它作爲點擊&地方您的內容右擊我在div!像這樣的: -

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

代替$(document).bind使用$("#click").bind

+0

@Lewis泰勒希望它能幫助! –

相關問題