我有一个JQuery / JS函数，当您将鼠标悬停在按钮上时会显示一个列表。但是，当您将鼠标悬停在按钮上时，列表不会显示。当您将鼠标悬停在该列表上时，我需要它保持显示状态；当您将鼠标悬停在该列表上或单击列表上的链接时，则需要关闭该列表。
我该如何实现？小提琴：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>
您可以将列表的ID添加到您的悬停调用中：
$("#recent, #recentcomplete").hover(function() {
要在单击链接时关闭列表，请使用：
$(document).on('click', '#recentcomplete a', function() {
$('#recentcomplete').hide()
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句