javascript - 切换 jquery 容器内的链接不起作用

Question

这是我用来在切换时打开 ul 的 jquery 函数，但是当点击其中的链接时，它们不会转到页面而是关闭 ul 容器

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

这是 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>

Answer 1

试试event.target，这里你需要为“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;
    }     
}      
});