javascript - JQuery上下文菜单显示/隐藏问题

Question

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

1. 右键单击邮件导航第一层
2. 右键单击邮件导航第二层
3. 右键单击消息列表

对于消息列表的右键单击，我试图将其设置为最后一个可见选项，以便在单击(“DropMenu”)时显示四个附加选项(“ForThisSenderMore”)保留它，以便单击其他地方将删除菜单，除非您单击“Title”或“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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <td>Right click me</td>
    </tr>
  </tbody>
</table>

<ul class="custom-menu" id="MailMenuFirstTier">
  <li>New Sub-Folder</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
  <li>New Sub-Folder</li>
  <li>Rename</li>
  <li>Delete</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailBodyList">
  <li class="Title">For This Message</li>
  <li>Reply</li>
  <li>Reply All</li>
  <li>Forward</li>
  <div class="divider"></div>
  <li>Mark As unread</li>
  <li>Delete</li>
  <li>Archive</li>
  <li>Junk</li>
  <li>Move</li>
  <li>Create Rule</li>
  <li>Save To BananzaCloud</li>
  <li>View Message Source</li>
  <div class="divider"></div>
  <li class="DropMenu">For This Sender</li>
  <li class="ForThisSenderMore">Send Email</li>
  <li class="ForThisSenderMore">Find Email</li>
  <li class="ForThisSenderMore">Move All Emails From...</li>
  <li class="ForThisSenderMore">Delete All From...</li>
</ul>

Answer 1

这只是一个 super 快速的答案，我稍后会为您浏览并重构/清理它，但是您几乎已经有了它。在您的 $("#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <td>Right click me</td>
    </tr>
  </tbody>
</table>

<ul class="custom-menu" id="MailMenuFirstTier">
  <li>New Sub-Folder</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
  <li>New Sub-Folder</li>
  <li>Rename</li>
  <li>Delete</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailBodyList">
  <li class="Title">For This Message</li>
  <li>Reply</li>
  <li>Reply All</li>
  <li>Forward</li>
  <div class="divider"></div>
  <li>Mark As unread</li>
  <li>Delete</li>
  <li>Archive</li>
  <li>Junk</li>
  <li>Move</li>
  <li>Create Rule</li>
  <li>Save To BananzaCloud</li>
  <li>View Message Source</li>
  <div class="divider"></div>
  <li class="DropMenu">For This Sender</li>
  <li class="ForThisSenderMore">Send Email</li>
  <li class="ForThisSenderMore">Find Email</li>
  <li class="ForThisSenderMore">Move All Emails From...</li>
  <li class="ForThisSenderMore">Delete All From...</li>
</ul>