html右击显示菜单

 

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>右键显示菜单</title>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <style>
    .table{width:100%;}
    .table,.table tr th, .table tr td {border:1px solid #0094ff; padding:5px 10px;}
    .table {border-collapse: collapse;}  
    .menu{
      background:#F8F8F8;
      position: absolute;
      display: none;
      border:1px solid lightgray;
      border-radius:3px;
      box-shadow: 2px 2px 5px #e0e0e0;
      z-index:9999;
    }
    .menu .menu-item{padding:10px 15px;}
    .menu .menu-item:not(:last-child){border-bottom:1px solid lightgray;}
    .menu .menu-item:hover{cursor:pointer;background:lightgray;}
    .td-sel{
      background:#3AB2FF;
    }
  </style>
  <script>
    $(document).ready(function(){
    
      $('.td').bind("contextmenu",function(ev){
        ev.preventDefault();
        var widthMiss=$('#menu').width()+ev.clientX>$('body').width()?$('#menu').width():0;
        var menu=document.getElementById("menu");
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        menu.style.display="block";
        menu.style.left=(ev.clientX-widthMiss)+"px";
        menu.style.top=ev.clientY+scrollTop+"px";
        $('.td').removeClass('td-sel');
        $(this).addClass('td-sel');
      });
      
      
      $(document).bind("click",function(ev){
        ev.preventDefault();
        $('#menu').hide();
        $('.td').removeClass('td-sel');
      });

    });
  </script>
 </head>
 <body>
   <table class="table">
    <tr>
        <td class="td">数据1</td><td class="td">数据2</td><td class="td">数据3</td>
    </tr>
    <tr>
        <td class="td">数据11</td><td class="td">数据22</td><td class="td">数据33</td>
    </tr>

   </table>

   <div id="menu" class="menu">
        <div class="menu-item">这是子菜单1</div>
        <div class="menu-item">这是子菜单2</div>
        <div class="menu-item">这是子菜单3</div>
        <div class="menu-item">这是子菜单4</div>
   </div>
 </body>
</html>

 

posted @ 2020-09-21 16:50  迢迢  阅读(505)  评论(0)    收藏  举报