Jquery:子菜单显示有悬停功能，但没有点击功能

Jquery: submenu appears with hover function but not click function

本文关键字：功能 悬停 菜单 显示 Jquery      更新时间：2023-09-26

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

我已经创建了一个脚本来显示第二级<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

但当我对第三级<ul>重复这一点时，它无法正常工作：

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

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

更奇怪的是，如果我更改。点击。悬停，它会很好地工作：

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

有人知道为什么悬停而不点击可以工作吗？

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

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

相关文章：