Jquery: submenu appears with hover function but not click function

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?

u better show||check ur css&html settings. p.s. demo would be opportunely — Yevgen
– Yevgen, Commented Feb 13, 2013 at 7:36
Do you have an example to look at? Might be caused by different things, is visibility set to hidden or is it positioned with a z-index? — Paul
– Paul, Commented Feb 13, 2013 at 7:37

Talha Akbar · Accepted Answer · 2013-02-13 07:45:17Z

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.

answered Feb 13, 2013 at 7:45

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery: submenu appears with hover function but not click function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related