0

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

<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

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

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

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

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

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

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

4

1 回答 1

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

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

于 2013-02-13T07:45:17.400 回答