Question

我有一个多层导航，其中包含3个<ul> s彼此嵌套（显然是一个隐藏子菜单的菜单，点击时显示）。

我创建了一个脚本来显示第二级<ul>，如果其中一个被点击。这很好用：

//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>重复此操作时，它无法正常工作：

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

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

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

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

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

Answer 1

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

尝试stopPropagation()，因为您还为其父级分配了click处理程序。当您点击#ctamenu ul li ul li时，也会调用。

Jquery：子菜单显示为具有悬停功能但不显示单击功能

1 个答案: