javascript - links inside the toggle jquery container dont work -

this jquery function use open ul on toggle links inside when clicked dont go page close ul container

jquery('#app-main-4059').addclass('open'); jquery('#app-main-4059').click(function() {     if (jquery(this).hasclass('open')) {         jquery(this).removeclass('open');         jquery(this).addclass('close');         jquery('#app-main-4059 > ul').slidedown(100);         return false;     } else {         jquery(this).removeclass('close');         jquery(this).addclass('open');         jquery('#app-main-4059 > ul').slideup(100);         return false;     }            }); 

this html:

<li class="has-submenu close" id="app-main-4059">     <span class="menu-item-wrap no_icon">         <a href="#" style=""><span class="link-text">features</span></a>     </span>     <div class="under"></div>     <ul style="display: block; overflow: hidden;">         <li id="app-main-3383"><span class="menu-item-wrap"><a href="http://appfessional.com/new/camps/" style=""><span class="link-text">camps</span></a></span></li>         <li id="app-main-3382"><span class="menu-item-wrap"><a href="http://appfessional.com/new/exercise/" style=""><span class="link-text">exercise</span></a></span></li>         <li id="app-main-3379"><span class="menu-item-wrap"><a href="http://appfessional.com/new/gear/" style=""><span class="link-text">gear</span></a></span></li>         <li id="app-main-2896"><span class="menu-item-wrap"><a href="http://appfessional.com/new/interviews/" style=""><span class="link-text">interviews</span></a></span></li>         <li id="app-main-2890"><span class="menu-item-wrap"><a href="http://appfessional.com/new/news/" style=""><span class="link-text">news</span></a></span></li>         <li id="app-main-3381"><span class="menu-item-wrap"><a href="http://appfessional.com/new/nutrition/" style=""><span class="link-text">nutrition</span></a></span></li>         <li id="app-main-3384"><span class="menu-item-wrap"><a href="http://appfessional.com/new/profiles/" style=""><span class="link-text">profiles</span></a></span></li>         <li id="app-main-3378"><span class="menu-item-wrap"><a href="http://appfessional.com/new/style/" style=""><span class="link-text">style</span></a></span></li>         <li id="app-main-3380"><span class="menu-item-wrap"><a href="http://appfessional.com/new/social/" style=""><span class="link-text">social</span></a></span></li>         <li id="app-main-3377"><span class="menu-item-wrap"><a href="http://appfessional.com/new/travel/" style=""><span class="link-text">travel</span></a></span></li>     </ul> </li> 

what happening called "event bubbling". see: what event bubbling , capturing?

you can stop behaviour in jquery using stoppropagation() method. see: http://api.jquery.com/event.stoppropagation/

code example:

jquery('#app-main-4059').addclass('open'); jquery('#app-main-4059').click(function(event) {     event.stoppropagation();     if (jquery(this).hasclass('open')) {         jquery(this).removeclass('open');         jquery(this).addclass('close');         jquery('#app-main-4059 > ul').slidedown(100);         return false;     } else {         jquery(this).removeclass('close');         jquery(this).addclass('open');         jquery('#app-main-4059 > ul').slideup(100);         return false;     }            });