ホバー上でサブメニューが予期したとおりに残りません

私のコードでメインメニューをホバーしようとするとサブメニューが開き、サブメニューの他のリンクもクリックできます。私がサブメニューを表示しようとすると表示されません。ホバー上でサブメニューが予期したとおりに残りません

私は私がサブメニューを見ることができるメニューにホバーしかし、私は、サブメニュー、それはこのようなあなたのdocument.ready機能を更新

$(document).ready(function(){ 

     $(".accounts").mouseenter(function() { 
      $(".underdrop").slideDown(); 
     }); 
     $(".accounts").mouseleave(function() { 
      $(".underdrop").slideUp(); 
     }); 

}); 




.accounts{ 

display: inline-block; 

position: relative; 
} 
.underdrop{ 
    width: 150px; 
    position: absolute; 
    background-color: #fff; 
    margin-top: 20px; 
    margin-left:250px; 
    border: 1px solid #d7d7d7; 
    padding-left: 0px; 
    height:230px; 
    z-index: 999999; 
    -webkit-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75); 
     -moz-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75); 
      box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75); 
    display:none; 

} 

.underdrop::before{ 
    content: ''; 
    position: absolute; 
    border: 15px solid #4b968a; 
    border-bottom-color: transparent; 
    border-right-color: transparent; 
    margin-left: 55px; 
    transform: rotate(45deg); 
    margin-top: -15.5px; 
    z-index: 9999 
}

DEMO

出典

2017-12-09 Tanmay

jsfiddle更新

$(document).ready(function(){ $(".accounts").mouseenter(function() { $(".underdrop").slideDown(); }); $(".underdrop").mouseleave(function() { $(".underdrop").slideUp(); }); });

jsfiddleチェックで確認しています。しかし、私はその理由がマウスリーブ機能だと思う。おそらく、マウスがサブメニューに残っているかどうかをチェックし、この場合はメインメニューを閉じないでください。ページの残りの部分をホバリングするときだけメニューを閉じることも考えられます。しかし、これはパフォーマンスにとって悪いかもしれません。 – PeMa

を消え行くしようとします。私は、モバイル上だと、本当に今、それをテストすることはできませんhere

出典

2017-12-09 06:41:05

は、この解決策が働いているかどうかですか？ –

解決策をありがとう、それは私が探していた答えです。私は論理が分かりますか？ – Tanmay

あなたのjsfiddleデモでメインメニューを離れるときにサブメニューをスライドして$（ "。accounts"）を削除しています。マウスのイベントのコードをサブメニュー$（ "。underdrop"）に入力しました。mouseleave（function（）{$（ "underdrop"）。slideUp（）;}）;私のjsfiddleでは、サブメニューはメインメニューを離れた後に開き、まだ開いており、サブメニューを閉じると閉じます。 –

ホバー上でサブメニューが予期したとおりに残りません

答えて

関連する問題