0

I have built an expandable, nested menu in <ul> <li> <ul> <li> style in HTML. Both, the upper and lower <li>s have an onCLick attribute. when clicking on the lower (nested) li, the upper li should not trigger onClick or at least submit to the handler, that it was activated indirectly.

How do I achieve this?

abarisone
  • 3,707
  • 11
  • 35
  • 54
Phil
  • 7,065
  • 8
  • 49
  • 91
  • 4
    event.stopPropagation() will do the stuff.. – Anoop Joshi P Jun 21 '16 at 14:08
  • 4
    Please show the code you have tried, then I can help. – Joey M-H Jun 21 '16 at 14:08
  • Thanks, I will try event.stopPropagation() right now. My code has the style of http://htmldog.com/techniques/dropdowns/ this tutorial, with for example "Mammals" and "Echidnas" both having an onClick attribute, and when Echidnas is clicked, Mammals' onCLick-Handler gets triggered too. – Phil Jun 21 '16 at 14:17
  • Could you please show your code? What did you try? – abarisone Jun 23 '16 at 14:21
  • Anoop Joshis answer was correct, I stopped propagating the entire div with the nested elements on document being ready. Works like a charm. – Phil Jun 23 '16 at 21:45

1 Answers1

1

I think this will help you:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

If it dont: Send me a message