JavaScript auf Hover-Effekte funktioniert nicht auf Kind-Links

Question

Ich habe diese Navigationsleiste, die ich viel Hilfe mit gestern bekam und es sieht wirklich nett aus, ich habe Hilfe, um einige JQuery zu erstellen, um eine neue Leiste auf den Klick eines Links anzuzeigen Ich habe versucht, das On-Click-Event durch einen Hover zu ersetzen, und zuerst würde das neue div erscheinen, aber dann, wenn ich einen Link auswähle, verschwindet das div wieder. Ich habe versucht, das Skript zu ändern, zu bleiben, wenn das Kind Links schwebte auf sind, wie folgt aus:

$('.navbar ul li:nth-child(2) a').hover(function() { 
    $(".additional").slideToggle() 
}); 

$('.navbar ul li:nth-child(2) a').hover(function() { 
    $(".additional child(*)").slideToggle() 
}); 

This is the fiddle of the (almost) working navigation bar

So dies der HTML ist, dass ich die Navigationsleiste zusammen zu werfen verwenden, um mit einigen CSS tun die Farben und andere kleine Anpassungen

<header> 
     <div class="navbar"> 
       <ul> 
        <li style="float: left"><a href="#home">Home</a></li> 
        <li><a href="#contract">Contracts</a></li> 
        <li><a href="#about">About Us</a></li> 
        <li><a href="#other">Other</a></li> 
        <li> <a href="#release">Release Notes</a></li> 
        <li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li> 
       </ul> 
        <ul class="additional"> 
         <li><a target="_blank" href="https://lscm.pharmoutcomes.org/celesio">Lloyds Pharmacy</a></li> 
         <li><a target="_blank" href="https://contracts.pharmoutcomes.org/superdrug/home">Superdrug Pharmacy</a></li> 
         <li><a target="_blank" href="https://contracts.pharmoutcomes.org/daylewis/home">Day Lewis Pharmacy</a></li> 
       </ul> 
     </div> 
</header> 

Answer 1

Ihr Problem tritt auf, weil Sie in Ihrem JavaScript-Code nicht angeben, dass das Kind offen bleiben müssen, wenn die Eltern schweben verliert, aber das Kind hat.

Um das zu erreichen versuchen, Ihren Code zu ändern: für eine visuelle Darstellung

var childHovered = false; 

    $('.navbar ul li:nth-child(2) a').hover(function() { 
     $(".additional").slideDown(); 
    }, 
    function() { 
    if (!childHovered) { 
     $(".additional").slideUp(); 
    } 
    }); 

    $(".additional").hover(function() { 
    childHovered = true; 
    }, 
    function() { 
    $(this).slideUp(); 
    }); 

Check out this update Ihrer Geige.

Answer 2

Versuchen Sie, Ihre Codes zu dieser Änderung wurden kollabiert Denken Sie, wenn Sie über den zweiten Link von zusätzlichen Klassen schweben wurden.

$('.navbar ul li:nth-child(2)').mouseenter(function() { 
     $(".additional").slideDown(); 
    }); 

    $('.additional').mouseleave(function() { 
     $(this).slideUp(); 
    });