在jQuery中悬停时添加一个列表?

时间:2018-02-19 18:53:54

标签: jquery

我希望将变量应用于列出的项目。列出的项目使用HTML格式:

<ul class="listed-items">
 <li class="navigation"><a href="/">Root Path</a></li>
 <li class="navigation"><a href="/something">Something Else</a></li>
 <li class="navigation dropdown-service"><a href="/websites">Website</a></li>

基本上我想点击最后一个列表项并使其可以运行,然后显示它自己列出的网站。

所以我有以下内容:

var service_list = [{name: "Google", url: "www.google.com"}, {name: "Bing", url:"www.bing.com"}];

然后我有了悬停:

$(document).ready(function()
{          
$("li").hover(function(){
    $(this).find(".dropdown-service").show()},
    function () {
    $(this).find(".dropdown-service").hide()
});
});

老实说,我不认为这是悬停工作的最佳方式,除非我要在变量的节目中添加一些内容。

我尝试过以下无效,虽然没有错误:

$(document).ready(function(){
$('li').hover(function(){
  $(this).find('.dropdown-service').show(service_list.name)},
  function(){
    $(this).find(".dropdown-service").hide();
  }
});
});

1 个答案:

答案 0 :(得分:1)

嗨,我想这就是你真正想要的东西

试试这个。这是jquery 3.3.1 https://jsfiddle.net/eaje2ywt/19/

$('.dropdown-service').on('mouseover',function(ev){
  ev.stopPropagation();
  for(var i=0;i<service_list.length;i++) {
 var s = $("<li>"+service_list[i].name+"</li>");
 $('.websites').append(s);
}