Question

所以我尝试使用.hover（）和.toggle（）创建一个下拉菜单。当用户滚动链接时，设法让菜单显示，当用户离开链接从菜单中选择项目时，它会消失。有没有一种方法或技术可以保持菜单切换，即使用户还没有悬停在链接上？

这是JS：

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

Answer 1

将菜单元素放在链接中。

Answer 2

根据您使用的HTML标记，解决方案可能会有很大差异。但是对这些事物的一般解决方案是让身体元素检测“鼠标”并检测事件源自哪个元素。如果它不是#menu_link或#the_menu，则隐藏菜单。

$("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中。

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

2 个答案: