Jquery：子菜单出现悬停功能但没有点击功能答案

【问题标题】：Jquery: submenu appears with hover function but not click functionJquery：子菜单出现悬停功能但没有点击功能
【发布时间】：2013-02-13 07:33:21
【问题描述】：

我有一个多层导航，由 3 个相互嵌套的 <ul>s 组成（显然是一个带有隐藏子菜单的菜单，点击时显示）。

我已经创建了一个脚本来显示第二级<ul>s 如果第一个被点击。这工作正常：

//CLICK MAIN NAV SHOW 2nd LAYER NAV
$("#ctamenu ul li").not("#ctamenu ul li ul li, .thirdsub").click(function() {
  $(this).children('ul').stop().delay(200).slideDown(300);
});//END CLICK FUNCTION

但是当我对第 3 级 <ul>s 重复此操作时，它无法正常工作：

$("#ctamenu ul li ul li").click(function () {
    $(this).find('.thirdsub').stop().show(300);
  });

奇怪的是，当我检查浏览器中的元素时，display: none css 肯定会从 thirdsub 元素中删除。我什至得到了一个彩色轮廓，Chrome 向我展示了元素应该在哪里。

更奇怪的是，如果我将 .click 更改为 .hover 它可以正常工作：

$("#ctamenu ul li ul li").hover(
  function () {
    $(this).find('.thirdsub').stop().show(300);
  },
  function () {
    $(this).find('.thirdsub').stop().hide(300);
  }
);

有谁知道为什么这可以使用悬停而不是点击？

【问题讨论】：

你更好地展示||检查你的 css&html 设置。 p.s.演示将是适当的
你有例子可以看吗？可能是由不同的事情引起的，visibility 设置为hidden 还是使用z-index 定位？

标签： javascript jquery click hover jquery-hover

【解决方案1】：

$("#ctamenu ul li ul li").click(function (e) {
    $(this).find('.thirdsub').stop().show(300);
    e.stopPropagation();
  });

尝试stopPropagation()，因为您还已将click 处理程序分配给它的父级。当您单击 #ctamenu ul li ul li 时，它也会调用。

【讨论】：