javascript - 除非单击或悬停，否则保持列表打开

Question

我有一个 JQuery/JS 函数，当您将鼠标悬停在按钮上时会显示一个列表。但是，当您将鼠标悬停在按钮上时，列表不会显示。我需要列表在您将鼠标悬停在其上时继续显示，并在您悬停或单击列表上的链接时关闭。

我怎样才能做到这一点？ fiddle :https://jsfiddle.net/wj6pguf2/

JQ

$(document).ready(function(){
var recent = ["Appel", "Aardbei", "Aardappelen", "Banaan", "Bananen", "Banana", "Druif"]
    $("#recent").hover(function() {
        $("#recentcomplete").empty();
        document.getElementById("recentcomplete").style.display = "block";
        recent.forEach(function(item) {
            $("#recentcomplete").append('<li><a href="#">' + item + '</a></li>');
        });
            }, function() {
        document.getElementById("recentcomplete").style.display = "none";
    });
});

HTML

        <button type="submit" name="recent" id="recent" style="max-width:150px;">snelkiezer</button>

        <ul id="recentcomplete" >
        </ul>

Answer 1

您可以将列表的 ID 添加到悬停调用中:

$("#recent, #recentcomplete").hover(function() {

jsFiddle example

要在单击链接时关闭列表，请使用:

$(document).on('click', '#recentcomplete a', function() {
    $('#recentcomplete').hide()
})