知向前端
首页
微语
赞助
留言板
友链
jquery自定义网页列表右键菜单选项
2016-5-6
Jon
js+jquery+ajax
jQuery自定义列表右键菜单选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery自定义列表右键菜单选项</title> <style> *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;color: black;} a:hover{color: white;background: black;} #mymenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;} #mymenu li{line-height: 22px;} #mymenu li a{display: block} #textbox{background: #aaa;width:260px;} #textbox li{ line-height: 35px; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #textbox li:hover,#textbox li.active{background: #ddd;color:#000;} img{height: 30px;width: 30px;} </style> </head> <body> <ul id="mymenu"> <li><a href="javascript:;">踢人</a></li> <li><a href="javascript:;">禁言</a></li> <li><a href="javascript:;">查看</a></li> <li><a href="javascript:;">编辑</a></li> <li><a href="javascript:;">带走</a></li> </ul> <ul id="textbox"> <li>1111111111</li> <li>222222222222</li> <li>3333333333333</li> <li>4444444444444</li> <li>5555555555555</li> <li>66666666666666</li> <li>77777777777777</li> <li>88888888888888</li> </ul> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ var myMenu=$('#mymenu'), textBox=$('#textbox'), ekey; // 点击对应右键菜单功能让其知道操作的是哪个列表选项 myMenu.on('click','li',function(){ alert(ekey); }); // 在列表项目上右键 textBox.on('contextmenu','li',function(e){ // 记录在那个列表项目上右键的 ekey=$(this).addClass('active').siblings().removeClass('active').end().index(); myMenu.show(); myMenu.css({ 'top':e.pageY+'px', 'left':e.pageX+'px' }); return false; }); // 点击任意位置让右键菜单消失 $(document).on('click',function(){ myMenu.hide(); textBox.find('li').removeClass('active'); }); }); </script> </body> </html>
运行代码
您可以修改框中代码后运行查看
标签:
右键菜单
分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):
声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!
下一篇
seajs+spm3修炼手册
上一篇
文件夹包含名称过长且无法放入回收站的项目
评论:
haoessays
2018-03-25 22:14
那么这篇文章太多了,因为它与不同的功能有关。 现在,一个拥有大量关于互联网和计算机信息的人成功了。 你的博客给了我最好的想法,所以我想在高层次上进行推广。
回复
取消回复
发表评论:
昵称
邮件地址 (选填)
个人主页 (选填)
搜索
日历
最新微语
html转义与翻转义工具 https://www.sojson.com/rehtml#google_vignette
2024-09-03 15:28
周公恐惧流言日,王莽谦恭未篡时
2024-09-03 15:28
更多»
最新评论
v2rayn常见问题
三克油思密达
clashx常见问题
多谢分享
分类
前端
html+css(25)
js+jquery+ajax(55)
js库(17)
angular(13)
前端工具(16)
其他(10)
生活
美文(20)
记录(16)
网闻网事(10)
常识(1)
后端
php(6)
服务器(3)
asp(1)
nodeJS(8)
随机文章
使用超简单的nodejs版本管理工具n安装升级和切换node版本
http和http2以及https
js模拟元素点击事件以及下载网络资源文件方法乱炖
使用php实现一个静态文件下载工具
英语代词的详细分类
最新文章
2022年总结
前端使用 js 下载文件并自定义文件名
技术基建漫谈
使用 canvas 画饼图动画 0%到100%
Angular12 路由复用策略规则编写及使用
热门文章
使用 navigator.userAgent 判断当前浏览器内核
解决index.html缓存问题
deployUrl解决angular项目打包后静态资源的部署到其它目录的问题
php 使用 SMTP 邮件服务器发送邮件
seajs+spm3修炼手册
存档
2023年1月(1)
2022年8月(1)
2022年5月(1)
2021年8月(1)
2021年7月(1)
2021年6月(1)
2021年5月(1)
2021年4月(1)
2021年3月(2)
2021年2月(3)
2021年1月(3)
2020年12月(1)
2020年11月(2)
2020年10月(2)
2020年9月(2)
2020年8月(2)
2020年7月(3)
2020年6月(3)
2020年5月(7)
2020年4月(5)
2020年3月(3)
2020年2月(2)
2020年1月(2)
2019年12月(2)
2019年11月(1)
2019年10月(3)
2019年9月(1)
2019年8月(2)
2019年7月(4)
2019年6月(5)
2019年5月(5)
2019年4月(3)
2019年3月(2)
2019年2月(2)
2019年1月(3)
2018年12月(1)
2018年11月(1)
2018年10月(1)
2018年9月(2)
2018年8月(1)
2018年7月(1)
2018年6月(3)
2018年5月(2)
2018年3月(1)
2018年2月(1)
2018年1月(1)
2017年11月(1)
2017年10月(1)
2017年8月(2)
2017年5月(1)
2016年11月(1)
2016年10月(2)
2016年9月(1)
2016年8月(1)
2016年7月(2)
2016年6月(2)
2016年5月(7)
2016年4月(6)
2016年3月(3)
2016年2月(2)
2016年1月(3)
2015年12月(2)
2015年11月(2)
2015年10月(3)
2015年9月(2)
2015年8月(4)
2015年7月(4)
2015年6月(8)
2015年5月(34)
2015年4月(8)
2015年3月(2)
2018-03-25 22:14