jquery displayサブメニューwhileムーバー

Question

私は水平メニューを持っています。このサブメニューはulの外側に表示されます。特定のクラスにカーソルを合わせると、.sub_menuが表示されます。 .sub_menuを動かすと、まだそこにいて欲しい。

しかし、マウスを.sub_menuから移動すると、マウスが消えます。

jQuery(document).on('click', '.mobile-sub-menu-controller', function() { .. 

変化

jQuery(document).on('click', '.mobile-sub-menu-controller', function() { 
     jQuery(this).siblings('.sub-menu').slideFadeToggle(); 
     if (jQuery(this).find('i').hasClass('icon-angle-down')) { 
      jQuery(this).find('i').removeClass('icon-angle-down'); 
      jQuery(this).find('i').addClass('icon-angle-up'); 
     } else { 
      jQuery(this).find('i').removeClass('icon-angle-up'); 
      jQuery(this).find('i').addClass('icon-angle-down'); 
     } 
    }); 

'mouseover'

Answer 1

カーソルがターゲットを横切って移動する毎に移動ユニットのイベントをトリガするため、'mouseenter'にクリック。

Answer 2

両方の要素（メニュー項目とサブメニュー）にウォッチャーを添付して、両方のウォッチャーで使用するクラスを決定できると思います。

しかし、あなたのメニューは、このような構造を持っている：

<ul> 
    <li><i>icon<i> Text 
     <ul> 
      ... 
     </ul> 
    </li> 
    <li><i>icon<i> Text 
     <ul> 
      ... 
     </ul> 
    </li> 
    ... 
<ul> 

あなたは、サブメニューを表示するメニュー項目のクラスを切り替えるには、CSSやMouseEnterイベント/ mouseleaveイベントを使用することができます。

メニュー項目とサブメニューの間に隙間があると、マウスがメニュー項目を別の要素に残してサブメニューには残らないので、cssまたはjsは正しく機能しません。

追加情報や質問がありましたらお知らせください。

また、質問を明確にするために、メニューのHTMLコードを添付することもできます。