作为<li>元素的”保存“”退出“怎么不显示在页面上,而是通过右键才能显示?

来源:2-7 右键菜单插件——contextmenu

慕粉3397896

2017-03-15 00:52

<body>

        <div id="divtest">

            <div class="title"><span class="fl">点击右键</span></div>

            <div class="content">

                <input id="btnSubmit" type="button" value="提交" />

                <div class="tip"></div>

            </div>

            <div class="contextMenu" id="sysMenu">

                <ul>

                    <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>

                    <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>

                </ul>

            </div>

        </div>

        

        <script type="text/javascript">

            $(function () {

                $("#divtest").contextMenu("sysMenu",

                  { bindings:

                     {

                         'Li3': function (Item) {

                             $(".tip").show().html("您点击了“保存”项");

                         },

                         'Li4': function (Item) {

                             $(".tip").show().html("您点击了“退出”项");

                         }

                     }

                  });


写回答 关注

4回答

  • 小小七i
    2017-03-17 15:22:27
    已采纳

    看清题目,它就是个右键点击显示自定义菜单的插件!

  • 什么时候才能成为大神呢
    2017-07-25 17:57:49

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>

            <title>右键菜单插件</title>

            <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />

            <link href="style.css" rel="stylesheet" type="text/css" />

            <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>

            <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script>

        </head>

        

        <body>

            <div id="divtest">

                <div class="title"><span class="fl">点击右键</span></div>

                <div class="content">

                    <input id="btnSubmit" type="button" value="提交" />

                    <div class="tip"></div>

                </div>

                <div class="contextMenu" id="sysMenu">

                    <ul>

                        <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>

                        <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>

                    </ul>

                </div>

            </div>

            

            <script type="text/javascript">

                $(function () {

                    $("#btnSubmit").contextMenu('sysMenu',

                      { bindings:

                         {

                             'Li3': function (Item) {

                                 $(".tip").show().html("您点击了“保存”项");

                             },

                             'Li4': function (Item) {

                                 $(".tip").show().html("您点击了“退出”项");

                             }

                         }

                      });

                });

            </script>

        </body>

    </html>

    为什么没效果啊

  • 小羊杨
    2017-06-20 09:30:30

    自己实现可以绑定鼠标点击事件,如果为右键点击,显示该li、、、

  • 小羊杨
    2017-04-10 19:11:57

    另一个问答解释 了,css里设置了#contextMenu{display:none;}

    qq_Bla...

    跟这个没关系,把文档头部引入的CSS文件删除就知道了, 跟小小七说的一样,class="contextMenu",这个说明了是右键点击显示的菜单

    2017-06-12 13:55:21

    共 1 条回复 >

jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69100 学习 · 400 问题

查看课程

相似问题