jQuery/javascript - 无法找到避免代码添加类的方法

Question

我目前正在修改FlexNav Plugin。我没有将鼠标悬停在打开子菜单上，而是通过点击将其改为打开。

现在的问题是，它需要两次点击打开一个子菜单。

我明白这个问题的原因是，当菜单被初始打开时，代码将类“flexnav-show”添加到子菜单ul。点击子菜单触发器然后删除此类，这不会导致任何结果，而第二次点击则会再次打开子菜单。

如果任何人都可以将我指向代码中的正确位置，我可以避免在所有ul上添加类。或者，如果有人有更好的主意...

$.fn.flexNav = function(options) { 
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector; 
settings = $.extend({ 
    'animationSpeed': 250, 
    'transitionOpacity': true, 
    'buttonSelector': '.menu-button', 
    'hoverIntent': false, 
    'hoverIntentTimeout': 150, 
    'calcItemWidths': false, 
    'hover': false 
}, options); 
$nav = $(this); 
$nav.addClass('with-js'); 
if (settings.transitionOpacity === true) { 
    $nav.addClass('opacity'); 
} 
$nav.find("li").each(function() { 
    if ($(this).has("ul").length) { 
    return $(this).addClass("item-with-ul").find("ul").hide(); 
    } 
}); 
if (settings.calcItemWidths === true) { 
    $top_nav_items = $nav.find('>li'); 
    count = $top_nav_items.length; 
    nav_width = 100/count; 
    nav_percent = nav_width + "%"; 
} 
if ($nav.data('breakpoint')) { 
    breakpoint = $nav.data('breakpoint'); 
} 
showMenu = function() { 
    if ($nav.hasClass('lg-screen') === true && settings.hover === true) { 
    if (settings.transitionOpacity === true) { 
     return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({ 
     height: ["toggle", "swing"], 
     opacity: "toggle" 
     }, settings.animationSpeed); 
    } else { 
     return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({ 
     height: ["toggle", "swing"] 
     }, settings.animationSpeed); 
    } 
    } 
}; 
resetMenu = function() { 
    if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) { 
    if (settings.transitionOpacity === true) { 
     return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({ 
     height: ["toggle", "swing"], 
     opacity: "toggle" 
     }, settings.animationSpeed); 
    } else { 
     return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({ 
     height: ["toggle", "swing"] 
     }, settings.animationSpeed); 
    } 
    } 
}; 
resizer = function() { 
    var selector; 
    if ($(window).width() <= breakpoint) { 
    $nav.removeClass("lg-screen").addClass("sm-screen"); 
    if (settings.calcItemWidths === true) { 
     $top_nav_items.css('width', '100%'); 
    } 
    selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button'; 
    $(selector).removeClass('active'); 
    return $('.one-page li a').on('click', function() { 
     return $nav.removeClass('flexnav-show'); 
    }); 
    } else if ($(window).width() > breakpoint) { 
    $nav.removeClass("sm-screen").addClass("lg-screen"); 
    if (settings.calcItemWidths === true) { 
     $top_nav_items.css('width', nav_percent); 
    } 
    $nav.removeClass('flexnav-show').find('.item-with-ul').on(); 
    $('.item-with-ul').find('ul').removeClass('flexnav-show'); 
    resetMenu(); 
    if (settings.hoverIntent === true) { 
     return $('.item-with-ul').hoverIntent({ 
     over: showMenu, 
     out: resetMenu, 
     timeout: settings.hoverIntentTimeout 
     }); 
    } else if (settings.hoverIntent === false) { 
     return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu); 
    } 
    } 
}; 
$(settings['buttonSelector']).data('navEl', $nav); 
touch_selector = '.item-with-ul, ' + settings['buttonSelector']; 
$(touch_selector).append('<span class="touch-button"><i class="navicon">&#9660;</i></span>'); 
toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button'; 
$(toggle_selector).on('click', function(e) { 
    var $btnParent, $thisNav, bs; 
    $(toggle_selector).toggleClass('active'); 
    e.preventDefault(); 
    e.stopPropagation(); 
    bs = settings['buttonSelector']; 
    $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs); 
    $thisNav = $btnParent.data('navEl'); 
    return $thisNav.toggleClass('flexnav-show'); 
}); 
$('.touch-button').on('click', function(e) { 
    var $sub, $touchButton; 
    $sub = $(this).parent('.item-with-ul').find('>ul'); 
    $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button'); 
    if ($nav.hasClass('lg-screen') === true) { 
    $(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide(); 
    } 
    if ($sub.hasClass('flexnav-show') === true) { 
    $sub.removeClass('flexnav-show').slideUp(settings.animationSpeed); 
    return $touchButton.removeClass('active'); 
    } else if ($sub.hasClass('flexnav-show') === false) { 
    $sub.addClass('flexnav-show').slideDown(settings.animationSpeed); 
    return $touchButton.addClass('active'); 
    } 
}); 
$nav.find('.item-with-ul *').focus(function() { 
    $(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide(); 
    return $(this).parent('.item-with-ul').find('>ul').addClass("open").show(); 
}); 
resizer(); 
return $(window).on('resize', resizer); 

};

Answer 1

该代码将第34行的'flexnav-show'类添加到所有子节点的'ul'节点。

代码在函数showMenu被调用时正在执行。