JQuery contextmenu显示/隐藏问题

我正在使用我的管理面板，邮件系统部分，我从Outlook.com中寻找灵感。 我添加了三个自定义右键单击劫持菜单，类似于Outlook;

1. 右键单击Mail Nav First-Tier
2. 右键单击Mail Nav Second-Tier
3. 右键单击消息列表

对于右键单击消息列表，我尝试使用的最后一个可见选项，以便在单击（“DropMenu”）时显示四个附加选项（“ForThisSenderMore”），以便在其他地方单击将删除菜单，除非你点击“标题”或“DropMenu”。

// Trigger action when the contexmenu is about to be shown $('ul.inbox-nav > li > a').bind("contextmenu", function(event) { event.preventDefault(); $("#MailMenuFirstTier").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); $('ul.inbox-nav > li > ul > li a').bind("contextmenu", function(event) { event.preventDefault(); $("#MailMenuSecondTier").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); $('.table>tbody>tr>td').bind("contextmenu", function(event) { event.preventDefault(); $("#MailBodyList").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); // If the Element is clicked somewhere $('ul.inbox-nav > li > a').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailMenuFirstTier").hide(100); } }); $('ul.inbox-nav > li > ul > li').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailMenuSecondTier").hide(100); } }); $('.table>tbody>tr>td').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailBodyList").hide(100); } }); jQuery(document).click(function(event) { if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) { jQuery('#MailMenuFirstTier').hide(); } if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) { jQuery('#MailMenuSecondTier').hide(); } if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) { jQuery('#MailBodyList').hide(); } }); jQuery(document).on("contextmenu", function(e) { if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) { $('#MailMenuFirstTier').hide(); } if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) { $('#MailMenuSecondTier').hide(); } if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) { $('#MailBodyList').hide(); } }); $("#MailBodyList .DropMenu").click(function(e) { $('.ForThisSenderMore').show(); }); 

 .custom-menu { display: none; z-index: 1000; position: absolute; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid #CCC; white-space: nowrap; font-family: sans-serif; background: #FFF; color: #333; border-radius: 5px; font-size: 12px; } .custom-menu li { padding: 8px 12px; cursor: pointer; } .custom-menu li:hover { background-color: #DEF; } .custom-menu .divider { content: " "; height: 1px; margin: 4px 10px; background: #929292; } #MailBodyList.custom-menu li.Title { color: #929292; } #MailBodyList.custom-menu li.Title:hover { background: #FFF; cursor: default; } #MailBodyList.custom-menu li.ForThisSenderMore { display: none; } 

  
 
 
 
Right click me
 
 
 
 
 
New Sub-Folder
 
Mark All As Read
 
Empty Folder
 
 
 
New Sub-Folder
 
Rename
 
Delete
 
Mark All As Read
 
Empty Folder
 
 
 
For This Message
 
Reply
 
Reply All
 
Forward
 
 
Mark As unread
 
Delete
 
Archive
 
Junk
 
Move
 
Create Rule
 
Save To BananzaCloud
 
View Message Source
 
 
For This Sender
 
Send Email
 
Find Email
 
Move All Emails From...
 
Delete All From...
  

Answer 1

这只是一个超级快速的答案，我会稍后对你进行重构和清理，但是你差不多了。 在你的$("#MailBodyList .DropMenu").click...你所要做的就是调用e.stopPropagation(); 这可以防止点击事件链接到下拉列表（单击某些内容时会被告知隐藏）。

 // Trigger action when the contexmenu is about to be shown $('ul.inbox-nav > li > a').bind("contextmenu", function(event) { event.preventDefault(); $("#MailMenuFirstTier").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); $('ul.inbox-nav > li > ul > li a').bind("contextmenu", function(event) { event.preventDefault(); $("#MailMenuSecondTier").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); $('.table>tbody>tr>td').bind("contextmenu", function(event) { event.preventDefault(); $("#MailBodyList").finish().toggle(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); }); // If the Element is clicked somewhere $('ul.inbox-nav > li > a').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailMenuFirstTier").hide(100); } }); $('ul.inbox-nav > li > ul > li').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailMenuSecondTier").hide(100); } }); $('.table>tbody>tr>td').bind("mousedown", function(e) { if (!$(e.target).parents(".custom-menu").length > 0) { $("#MailBodyList").hide(100); } }); jQuery(document).click(function(event) { if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) { jQuery('#MailMenuFirstTier').hide(); } if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) { jQuery('#MailMenuSecondTier').hide(); } if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) { jQuery('#MailBodyList').hide(); } }); jQuery(document).on("contextmenu", function(e) { if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) { $('#MailMenuFirstTier').hide(); } if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) { $('#MailMenuSecondTier').hide(); } if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) { $('#MailBodyList').hide(); } }); $("#MailBodyList .DropMenu").click(function(e) { e.stopPropagation(); $('.ForThisSenderMore').show(); }); 

 .custom-menu { display: none; z-index: 1000; position: absolute; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid #CCC; white-space: nowrap; font-family: sans-serif; background: #FFF; color: #333; border-radius: 5px; font-size: 12px; } .custom-menu li { padding: 8px 12px; cursor: pointer; } .custom-menu li:hover { background-color: #DEF; } .custom-menu .divider { content: " "; height: 1px; margin: 4px 10px; background: #929292; } #MailBodyList.custom-menu li.Title { color: #929292; } #MailBodyList.custom-menu li.Title:hover { background: #FFF; cursor: default; } #MailBodyList.custom-menu li.ForThisSenderMore { display: none; } 

  
 
 
 
Right click me
 
 
 
 
 
New Sub-Folder
 
Mark All As Read
 
Empty Folder
 
 
 
New Sub-Folder
 
Rename
 
Delete
 
Mark All As Read
 
Empty Folder
 
 
 
For This Message
 
Reply
 
Reply All
 
Forward
 
 
Mark As unread
 
Delete
 
Archive
 
Junk
 
Move
 
Create Rule
 
Save To BananzaCloud
 
View Message Source
 
 
For This Sender
 
Send Email
 
Find Email
 
Move All Emails From...
 
Delete All From...