links inside the toggle jquery container dont work

Question

This is the jquery function I use to open the ul on toggle but the links inside it when clicked they dont go to the page but close the 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 is the 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>

You need to avoid the toggle event when links within it is clicked. like this `$('ul li').on('click',function(event) { event.stopPropagation(); })` .REF:http://api.jquery.com/event.stopPropagation/ — dreamweiver, Aug 16 '13 at 11:20

Anup Singh · Answer 1 · 2013-08-16T11:42:21.797

Try with event.target, here you need to write some condition for "FEATURES"

jQuery('#app-main-4059').addClass('open');
jQuery('#app-main-4059').click(function( event ) {
var target = jQuery(event.target);
if( target.is("li") ) {
    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;
    }     
}      
});

score 2 · Accepted Answer · edited May 23 '17 at 11:49

What is happening is called "event bubbling". See: What is event bubbling and capturing?

You can stop this behaviour in jquery by using the 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;
    }           
});

This doesn't address the issue. The problem is that the event propagation is stopped and so the links aren't followed. The OP needs to NOT stop event propagation. — cfs, Aug 16 '13 at 11:31

links inside the toggle jquery container dont work

2 Answers2