0

から特定の css クラスを削除して、.nav適切に表示されるようにする必要があります。現在、さまざまな画面サイズに基づくと、その動作は予想外です。

フィドルの例

デモビュー

ドロップダウン サブメニューが正しく表示されないことに気付くでしょう。ドロップダウンの右側に十分なスペースがある場合はドロップダウンの右側に、<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 クラスとして次のように表示されます。要素にクラスがあるかどうかを確認するために、jQueryを使用して確認しようとしていました。class がある場合は何もせず、 class がない場合は、次のコードでは機能しない同じ要素からクラスを削除する必要があります。has-paneldropdown dropdown-lasthas-panelhas-paneldropdown-last

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

2 に答える 2

0

コードを使用して解決

    if( $(this).find(".dropdown").hasClass("has-panel")){
       // $(this).find(".dropdown").removeClass("dropdown-last");
        //alert('has class');
    }
    else
    {
    //alert('has no class');
     $(this).find(".dropdown").removeClass("dropdown-last");
    }
于 2013-10-02T10:34:15.280 に答える
0

削除する$(window).load(function(){}と動作します

于 2013-10-02T09:13:21.163 に答える