列表中顯示隱藏的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的事件。