CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xhevat Ziberi
Xhevat Ziberi

Reputation: 19

links inside the toggle jquery container dont work

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>

Upvotes: 0

Views: 1109

Answers (2)

Anup Singh
Anup Singh

Reputation: 1573

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;
    }     
}      
});

Upvotes: 3

Damien Overeem
Damien Overeem

Reputation: 4529

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;
    }           
});

Upvotes: 2

Related Questions