为了账号安全,请及时绑定邮箱和手机立即绑定

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

<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://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>

                    <li id="Li4"><img src="http://img1.sycdn.imooc.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 回答

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

0 回复 有任何疑惑可以回复我~

<!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://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>

                    <li id="Li4"><img src="http://img1.sycdn.imooc.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>

为什么没效果啊

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~
#1

qq_BlackDatura_0

跟这个没关系,把文档头部引入的CSS文件删除就知道了, 跟小小七说的一样,class="contextMenu",这个说明了是右键点击显示的菜单
2017-06-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信