javascript - How to properly prevent bubbling when using toggle()? -

javascript - How to properly prevent bubbling when using toggle()? -

i trying show lists on page load if more 768px hide them if less , create them show on clicking titles.

it works ok not after resizing window , don't why happening? advice?

how should handle bubbling properly?

html:

<nav> <h3 class="nav__title">first</h3> <div class="links"> <ul> <li><a href="#">first one</a></li> <li><a href="#">first two</a></li> <li><a href="#">first three</a></li> </ul> </div> </nav> <nav> <h3 class="nav__title">second</h3> <div class="links"> <ul> <li><a href="#">second one</a></li> <li><a href="#">second two</a></li> <li><a href="#">second three</a></li> </ul> </div> </nav>

js:

(function () { function footerlinks() { if ($(window).width() < 768) { $(".links").hide(); $(".nav__title").on("click", function (e) { e.preventdefault(); $(this).next(".links").toggle("fast"); }); } else { $(".links").show(); } } footerlinks(); $(window).resize(function () { footerlinks(); }); }());

jsfiddle

i think want, adding event handlers every time window resized:

(function () { $(".nav__title").on("click", function (e) { e.preventdefault(); // drop out of function if window big plenty if( $(window).width() >= 768 ){ return; } $(this).next(".links").toggle("fast"); }); function footerlinks() { if ($(window).width() < 768) { $(".links").hide(); } else { $(".links").show(); } } footerlinks(); $(window).resize(function () { footerlinks(); }); }());

http://jsfiddle.net/e64j4/6/

javascript jquery event-bubbling