2016-07-19 20 views
0

Wherevere ich über das Menü schweben, funktioniert es gut. Aber, wenn ich versuche, auf die Untermenü Links und Kinder zu bekommen, schließt sich das MenüDropdown-Menü Schließt auf Hover (Fehler)

/*---------------------------------------------------- 
 
/* 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

Binden Sie keine Ereignisse in einem anderen Event-Handler, da dies zu unerwartetem Verhalten führen kann. – empiric

+0

weil Ihre Hover-Funktion direkt auf einem Listenelement 'li' steht und sonst nichts. Du könntest mit dem Posten deiner HTML auch tun – Darren

+0

ich bin Dummy zu Javascript, kannst du rewritecode für mich? –

Antwort

0

Der Code, den Sie Werke geschrieben ganz gut; hier ist ein PLNKR, um es zu beweisen: https://plnkr.co/edit/IFaueUhKE3J1K9vY1NkQ?p=preview (einfach umhüllt ein <div id='navigation'><ul> rund um den oberen li). Wenn Sie immer noch den Mauszeiger über die untergeordneten Elemente bewegen, wird dies durch etwas verursacht, das in der ursprünglichen Frage nicht angezeigt wird. Z.B. Diese CSS-Zugabe:

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

würde es schwierig machen, die untergeordneten Elemente zu erreichen, weil Sie kurz, die Eltern-Hover verlieren, während auf das Kind zu bewegen.