0

这是我用来在切换时打开 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>
4

2 回答 2

3

试试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;
    }     
}      
});
于 2013-08-16T11:35:44.667 回答
2

正在发生的事情称为“事件冒泡”。请参阅：什么是事件冒泡和捕获？

您可以使用该stopPropagation()方法在 jquery 中停止此行为。见：http ://api.jquery.com/event.stopPropagation/

代码示例：

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;
    }           
});
于 2013-08-16T11:26:00.513 回答