<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现右键菜单 - web前端网</title> <style> body{padding:0;margin:0;font:normal 12px/25px "\5FAE\8F6F\96C5\9ED1";color:#333;} ul,li{margin:0;padding:0;} li{list-style:none;} a{color:#333;text-decoration:none;} a:hover{color:#008000;} #class-list{width:200px;margin:100px;padding:10px;border:1px solid #DDD;border-radius:5px;} #class-list li{text-indent:10px;margin-bottom:1px;} #class-list li a{display:block;} #class-list li a:hover,#class-list li.an a,#menu li a:hover{background:#F4F4F4;color:#008000;} #menu{width:50px;display:none;position:absolute;top:0;left:0;padding:5px;z-index:100;} #menu ul{background:#FFF;border-radius:5px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)} #menu ul li{line-height:30px;border-bottom:1px solid #F2F2F2;text-align:center;} #menu ul li a{display:block;} #menu ul li a:hover{background:#FAFAFA;} </style> </head> <body> <div id="class-list"> <ul> <li><a href="http://www.web277.com/doc/" target="_blank">前端文档</a></li> <li><a href="http://www.web277.com/sj/" target="_blank">前端设计</a></li> <li><a href="http://www.web277.com/xc/" target="_blank">xHTML+CSS</a></li> <li><a href="http://www.web277.com/hc/" target="_blank">HTML5+CSS3</a></li> <li><a href="http://www.web277.com/js/" target="_blank">Javascript</a></li> <li><a href="http://www.web277.com/jq/" target="_blank">jQurey</a></li> </ul> </div> <div id="menu"> <ul> <li><a href="http://www.web277.com" target="_blank">修改</a></li> <li><a href="http://www.web277.com" target="_blank">生成</a></li> <li><a href="http://www.web277.com" target="_blank">预览</a></li> </ul> </div> </body> </html> <script src='http://static.w3cfuns.com/js/jQuery/library/jquery-1.7.2.min.js?v=20121228'></script> <script> $(function(){ $("#class-list").on("contextmenu","li",function(e){ if(typeof e.preventDefault === "function"){ e.preventDefault(); e.stopPropagation(); }else{ e.returnValue = false; e.cancelBubble = true; } $(this).addClass("an").siblings("li").removeClass("an") $("#menu").css({"left":e.clientX,"top":e.clientY}).fadeIn() }) $(document).bind("click",function(e){ var target = $(e.target); if(target.closest("#class-list").length == 0){ $("#menu").hide() $("#class-list li.an").removeClass("an") } }) }) </script>