2016-07-19 4 views
0

メニューの上にマウスカーソルを移動すると、うまく動作します。私はサブメニューリンクや子供を取得しようとする。しかし、メニューはドロップダウンメニューがホバーで閉じる(エラー)

/*---------------------------------------------------- 
 
/* Dropdown menu 
 
/* ------------------------------------------------- */ 
 
jQuery(document).ready(function($) { 
 

 
    function mtsDropdownMenu() { 
 
    var wWidth = $(window).width(); 
 
    if (wWidth > 865) { 
 
     $('#navigation ul.sub-menu, #navigation ul.children').hide(); 
 
     var timer; 
 
     var delay = 100; 
 
     $('#navigation li').hover(
 
     function() { 
 
      var $this = $(this); 
 
      timer = setTimeout(function() { 
 
      $this.children('ul.sub-menu, ul.children').slideDown('fast'); 
 
      }, delay); 
 

 
     }, 
 
     function() { 
 
      $(this).children('ul.sub-menu, ul.children').hide(); 
 
      clearTimeout(timer); 
 
     } 
 
    ); 
 
    } else { 
 
     $('#navigation li').unbind('hover'); 
 
     $('#navigation li.active > ul.sub-menu, #navigation li.active > ul.children').show(); 
 
    } 
 
    } 
 

 
    mtsDropdownMenu(); 
 

 
    $(window).resize(function() { 
 
    mtsDropdownMenu(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="menu-item-513" class="menu-item "><a href="#"><i class="fa fa-calculator"></i> OFFERTE AANVRAGEN</a> 
 
    <ul class="sub-menu"> 
 
    <li id="menu-item-1146" class="menu-item"><a href="#">Zonnepanelen installatie (België)</a> 
 
    </li> 
 
    <li id="menu-item-1144" class="menu-item"><a href="#">Zonnepanelen reinigen (België)</a> 
 
    </li> 
 
    <li id="menu-item-1145" class="menu-item"><a href="#">Zonnepanelen installatie (Nederland)</a> 
 
    </li> 
 
    </ul> 
 
</li>

+0

他のイベントハンドラ内でイベントをバインドしないでください。予期しない動作が発生する可能性があります。あなたのホバー機能がリスト要素 'li'に直接あり、何もないので、 – empiric

+0

です。あなたはあなたのhtmlを投稿することもできます – Darren

+0

私はJavascriptにダミーです、あなたは私のためにrewritecodeできますか? –

答えて

0

あなただけの罰金作品を掲載コードを閉じ;それを証明するためのplnkrがあります:https://plnkr.co/edit/IFaueUhKE3J1K9vY1NkQ?p=preview (単純にを1ラウンド目にラップします)。 チャイルドエレメントの上にカーソルを合わせても、元の質問に表示されていないものが原因です。例えば。このCSSを追加:

li.menu-item { 
    position: relative; 
    top: 50px; 
    left: 300px; 
} 

が子供に移動しているときに、簡単に、親ホバーを失うので、それが難しい子項目に到達することになるだろう。

関連する問題