jQuery：子菜单显示具有悬停功能，但没有单击功能

Question

I have a multi-layered navigation the consists of 3 <ul> s nested in each other (obviously a menu with hidden submenus the show on click).

I have created a script to show the 2nd level <ul> s if one of the first is clicked. This works fine:

//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

But when I repeat this for the 3rd level <ul> s it does not work properly:

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

What is strange is that when I inspect the elements in the browser the display: none css is definitely removed from the thirdsub element. I even get a coloured outline where Chrome is showing me where the element should be.

What even weirder is that if I change .click to .hover it works fine:

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

Would anyone know why this could be working with hover but not click?

Answer 1

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

Try stopPropagation() because you also have assigned click handler to parent of that. Which will invoke also when you click on #ctamenu ul li ul li .