Javascript Jquery下拉菜单使用切换和悬停（）问题

所以我尝试使用.hover和.toggle创建一个下拉菜单。当用户在链接上滚动时，您已设法使菜单出现，但当用户离开链接从菜单中选择项目时，菜单消失。有没有一种方法或技术可以让用户即使没有在链接上悬停，也可以切换菜单

以下是JS：

<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>

---

将菜单元素放在链接内。

将菜单元素放在链接内。

根据您使用的HTML标记，解决方案可能会有很大不同。但解决这类问题的一般方法是让body元素检测mouseenters并检测事件起源于哪个元素。如果不是菜单链接或菜单，则隐藏菜单

$("body").mouseenter(function (e) {
   var eventParents = $(e.target()).parents();
   if (eventParents.index($("#menu_link")) == -1 &&
         eventParents.index($("#the_menu")) == -1) {
      $("#the_menu").hide();
   }
});

$("#menu_link").mouseenter(function () {
   $("#the_menu").show();
});

---

这为您提供了灵活性，例如，将菜单链接放置在菜单本身的不同容器div中。

根据您使用的HTML标记，解决方案可能会有很大差异。但解决这类问题的一般方法是让body元素检测mouseenters并检测事件起源于哪个元素。如果不是菜单链接或菜单，则隐藏菜单

$("body").mouseenter(function (e) {
   var eventParents = $(e.target()).parents();
   if (eventParents.index($("#menu_link")) == -1 &&
         eventParents.index($("#the_menu")) == -1) {
      $("#the_menu").hide();
   }
});

$("#menu_link").mouseenter(function () {
   $("#the_menu").show();
});

---

这为您提供了灵活性，例如，将菜单链接放置在菜单本身的另一个容器div中。

我考虑过这一点，但这似乎可能会干扰菜单元素内的锚定标记。否？@Thomas：这通常是通过将每个菜单项设置为一个，并将子菜单元素设置为一个。您还可以在中添加一个。我考虑过这一点，但这似乎可能会干扰菜单元素中的锚标记。否？@Thomas：这通常是通过将每个菜单项设置为一个，并将子菜单元素设置为一个。你也可以在里面放一个。