為什么右鍵菜單插件的contextmenu的保存和退出的div一開始沒有顯示在頁面中，CSS也沒看到display:none，求賜教？？？
html 代碼
<!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.xianlaiwan.cn/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.xianlaiwan.cn/data/jquery-1.8.2.min.js"></script>
? ? ? ? <script src="http://www.xianlaiwan.cn/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 () {
? ? ? ? ? ? ? ? $("#divtest").contextMenu('sysMenu',
? ? ? ? ? ? ? ? ? { bindings:
? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ?'Li3': function (Item) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(".tip").show().html("您點擊了“保存”項");
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?'Li4': function (Item) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(".tip").show().html("您點擊了“退出”項");
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? </script>
? ? ? ? </body>
</html>
加粗部分沒有顯示出來
下面是CSS
#divtest
{
? ? width: 282px;
}
#divtest .title
{
? ? padding: 8px;
? ? background-color: Blue;
? ? color: #fff;
? ? height: 23px;
? ? line-height: 23px;
? ? font-size: 15px;
? ? font-weight: bold;
}
#divtest .content
{
? ? padding: 8px 0px;
? ? background-color: #fff;
? ? font-size: 13px;
}
#divtest .content .tip
{
? ? text-align: center;
? ? border: solid 1px #ccc;
? ? background-color: #eee;
? ? margin: 20px 0px;
? ? padding: 8px;
? ? display: none;
}
.fl
{
? ? float: left;
}
.fr
{
? ? float: right;
}
2017-03-17
<head>里邊引用了一個這個css<link href="http://www.xianlaiwan.cn/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /> 內容為
.contextMenu {display:none}
ul li {font-size:9pt}
2017-11-04
此插件會自動隱藏id="contextMenu"的元素