Question

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

我怎样才能做到这一点？小提琴：https://jsfiddle.net/wj6pguf2/

JQ

['info']['categories']

HTML

$(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";
    });
});

Answer 1

您可以将列表的ID添加到悬停通话中：

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

<强> jsFiddle example

要在点击链接时关闭列表，请使用：

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

保持列表打开，除非单击或悬停

1 个答案: