列表中显示隐藏的jQuery

Question

我有这样的名单：

<ol id="followUs"> 
    <li>Follow us</li> 
    <li class="blog"><a href="#"></a></li> 
    <li class="linkedIn"><a href="#"></a></li> 
    <li class="twitter"><a href="#"></a></li> 
    <li class="facebook"><a href="#"></a></li> 
    <li class="smartPhone"><a href="#"></a></li> 
    <li id="shareMore">More 
     <ul id="socialMore" style="display: none;"> 
      <li id="youtube"><a href="#">Youtube</a></li> 
      <li id="flickr"><a href="#">FlickR</a></li> 
      <li id="slideshare"><a href="#">SlideShare</a></li> 
      <li id="newsletter"><a href="#">Newsletter</a></li> 
     </ul> 
    </li> 
</ol> 

而下面的jQuery：

<script> 
jQuery(document).ready(function(){ 
    jQuery("li#shareMore").mouseenter(function() { 
     jQuery('ul#socialMore').css("display","block"); 
     jQuery('span.popin_header_button').css("display","none"); 
    }); 

    jQuery("li#shareMore").mouseleave(function() { 
     setTimeout(function(){ 
      jQuery('ul#socialMore').css("display","none"); 
      jQuery('span.popin_header_button').css("display","block"); 
     },1000); 
    }); 
}) 
</script> 

第二个列表#socialMore隐藏在页面加载，我想上显示它当我悬停在#socialMore的列表中时，这将留在那里。问题是，当我还在悬停#socialMore列表时，列表出现并消失（除非第二个列表与第一个列表重叠，而我不想）。

其次，我希望员工位于列表下方，这不是偶然发生的，因此我需要隐藏这些列表。

对于CSS，第一个列表#followUs是水平的，第二个列表#shareMore是垂直的。

任何人都可以在这里提出解决方案。没有得到什么错误。

谢谢你路过。

于10月15日

编辑我改变了jQuery来：

jQuery("li#shareMore").hover(function() { 
    jQuery('li#shareMore>ul').show(); 
},function(){ 
     setTimeout(function(){ 
      jQuery('li#shareMore>ul').hide(); 
     },2000); 
    } 
); 

它的工作原理，但不稳定。有时，它完美的作品，有时，在UL刚刚消失，即使我仍然徘徊在第一<li id="shareMore">More

编辑二：10月15日

推进一步，我发现这不是真的不稳定。逻辑上，在页面刷新时，如果我徘徊li#shareMore而不转到>ul列表，它按预期工作。当我徘徊在>ul列表上时，它第一次按预期工作。但是，一旦我从>ul列表中悬停出来，则从以下时间开始，>ul列表将在setTimeOut时间内消失，在此情况下为2秒。

但是，如果我将setTimeOut限制设置为0，则所有内容都按预期工作。这是迄今为止的观察，除非我失去了一些东西。陌生的世界 ！

感谢您的任何提示>奇怪的情况。

编辑

它似乎终于解决了，使用cleartimeout：jquery hover and setTimeout/clearTimeOut

Answer 1

您可以使用jQuery的show()和hide()功能这一点。像

$('ul#socialMore').show(); 
$('span.popin_header_button').hide(); 

Answer 2

你可以试试：

jQuery(document).ready(function(){ 
    jQuery("li#shareMore").mouseenter(function() { 
     $('ul#socialMore').show(); 
    }); 

    jQuery("li#shareMore").mouseleave(function() { 
     $('ul#socialMore').hide(); 
    }); 
}) 

见：jsfiddle

Answer 3

你能用下面的代码

jQuery("li#shareMore").on("mouseout", 'ul#socialMore li', function() { 
    setTimeout(function(){ 
     jQuery('ul#socialMore').css("display","none"); 
     jQuery('span.popin_header_button').css("display","block"); 
    },1000); 
}); 

开始尝试使用 “上” 的jQuery的事件。