保持列表打開，除非點擊或懸停

我有一個JQuery/JS函數，當您將鼠標懸停在按鈕上時顯示列表。但是，當您將鼠標懸停在按鈕上時，該列表不顯示。我需要列表在您將鼠標懸停在列表上時繼續顯示，並在您懸停或點擊列表中的鏈接時關閉。保持列表打開，除非點擊或懸停

我該如何做到這一點？小提琴：https://jsfiddle.net/wj6pguf2/

$(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>

來源

2017-06-05 Some Name

，可以在列表的ID添加到您的通話懸停：

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

jsFiddle example

要在點擊一個鏈接關閉列表，使用方法：

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

來源

2017-06-05 20:18:05 j08691

這是非常好的，簡單的，謝謝。一旦鏈接被點擊，我怎樣才能關閉它？ –

一旦你點擊一個鏈接，它應該關閉，因爲鏈接將帶你到這個頁面上的另一個頁面或位置。如果你現在改變'＃'，你會看到。你需要保留你的例子中的'＃'URL嗎？ – j08691

是的，這是一個將所選項目添加到數據庫的功能。所以這個鏈接不會把你帶到另一個頁面。 –

保持列表打開，除非點擊或懸停

回答

相關問題