如果用户使用浏览器的上下文菜单并单击slideUp
选项,如何nav
Open link in a new tab
元素?
$('.title').on('click', function(){
$('.nav').slideDown();
});
$('.nav').on('click', function(){
$(this).slideUp();
});
.title{cursor:pointer;}
.nav{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>MENU</div>
<div class='nav'>
<a href = 'https://google.com'>Google</a>
</div>
答案 0 :(得分:1)
实际上,上下文菜单并没有为您提供100%接受的答案,您可以右键单击元素以显示上下文菜单。您将在此处显示自定义菜单代码,也许对您有帮助。链接:http://jsfiddle.net/6cqhsfvL/1/或以上代码
$('.title').on('click', function(){
$('.nav').slideDown();
});
$('.nav').on('click', function(){
$(this).slideUp();
});
$('.nav a').on("mousedown",function(e){
e.preventDefault();
if(event.which==3){
$('#item li a').attr('href', $(this).attr('href'));
}
});
$('.nav a').bind("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css("left",e.pageX);
$("#cntnr").css("top",e.pageY);
$("#cntnr").fadeIn(200,startFocusOut());
});
$("#items").on('click', 'a', function(event) {
event.stopPropagation();
$('.nav').slideUp();
$("#cntnr").hide();
window.open($(this).attr('href'), '_blank' );
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
.title{cursor:pointer;}
.nav{display:none;}
#items{
list-style:none;
margin:0px;
margin-top:4px;
padding-left:10px;
padding-right:10px;
padding-bottom:3px;
font-size:17px;
color: #333333;
}
#cntnr{
display:none;
position:fixed;
border:1px solid #B2B2B2;
width:150px; background:#F9F9F9;
box-shadow: 3px 3px 2px #E9E9E9;
border-radius:4px;
}
li{
padding: 3px;
padding-left:10px;
}
#items :hover{
color: white;
background:#284570;
border-radius:2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>MENU</div>
<div class='nav'>
<a href = 'https://google.com'>Google</a>
</div>
<div id='cntnr'>
<ul id='items'>
<li><a target="_blank" href="#">Open new tab</a></li>
</ul>
</div>