特定のサブメニュークラスのホバー状態をオフにする

Question

サブメニューを含むメニューを作成しました。サブメニューは、ホバーの表示/非表示です。デフォルトはhideです。すべて正常に動作します。サブメニュー要素liにクラスcurrent_page_itemが含まれている場合、jQueryは、ページ読み込み直後にこのクラスを含むサブメニューを表示します。

しかし、私はメニューのアイテムにカーソルを合わせると、jQueryが閉じてサブメニューがcurrent_page_itemクラスで開き、正しく動作しません。

li要素のサブメニューがcurrent_page_itemのページロード後に表示され、このサブメニューの項目をトラストすることができます。今では上下にジャンプして、いくつかのサブメニュー項目をクリックするのが難しいです。

ここはフィドルです。項目3は問題のある項目です。

https://jsfiddle.net/otrd7vbq/8/

Answer 1

これを試してみてください：

HTML：

<ul class="nav"> 
    <li>1 item</li> 
    <li>2 item</li> 
    <li class="hover"> 3 item 
    <ul> 
     <li>3a item</li> 
     <li>3b item</li> 
    </ul> 
    </li> 
    <li class="hover">4 item 
    <ul class="display-none"> 
     <li>4a item</li> 
     <li>4b item</li> 
    </ul> 
    </li> 
</ul> 

CSS：

.display-none { 
    display: none; 
} 

.display-block { 
    display: block !important; 
} 

はJavaScript：

jQuery(document).ready(function(){ 
    $(".hover").hover(function(){ 
    if ($(this).children("ul").length > 0) { 
     $(this).children("ul").addClass("display-block"); 
    } 
    }, function(){ 
     $(".display-none").removeClass("display-block"); 
    }); 
}); 

あなたは基本的にやっていることです

：liタグが子を持つ場合、display:block彼らは

DEMO