javascript - 在特定条件下使用 jquery 删除类以正确对齐子菜单

Question

我需要从 .nav 中删除某个 css 类，以便它正确出现。现在，根据不同的屏幕尺寸，它的行为是出乎意料的。

fiddle example

Demo View

您会注意到下拉子菜单没有正确显示。我希望下拉列表显示在下拉列表的右侧，当它在右侧有足够的空间时，在下拉列表的左侧，当它基于 <div class="main-wrapper"> 的空间较少时。宽度，即 1000px 宽。

我尝试使用以下代码修复它，但它无法正常工作:

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
        if($(this).hasClass("has-panel")){
           // $(this).find(".dropdown").removeClass("dropdown-last");
            //alert('has class');
        }
        else
        {
        //alert('has no class');
        }
    });

    /* if dropdnw*/
    $(".dropdown").each(function(){
        var $this = $(this);
        if($this.find(".dd-panel").length > 0){
            $this.addClass('has-panel');

        }


        if($this.find(".dd-panel").length = 1){
           $(".dropdown").css( "min-height", "80px" );
        }
    });
});

调试时，它显示以下内容作为 div 类 dropdown has-panel dropdown-last如果它的 div 有类 has-panel和一个没有大型菜单的显示类为 dropdown dropdown-last .我试图使用 jQuery 检查元素是否具有类。如果它有类 has-panel , 然后什么也不做，如果它没有类 has-panel , 然后我需要删除类 dropdown-last来自无法使用以下代码的同一元素:

if($(this).hasClass("has-panel")){
   // $(this).find(".dropdown").removeClass("dropdown-last");
    alert('has class');
}
else
{
//alert('has no class');
}

Answer 1

删除 $(window).load(function(){} 它将起作用