顯示/隱藏li的相應部分內容？

Question

的HMTL代碼：

<div id="nav"> 
<ul> 
<li><a href="#">test 1</a></li> 
<li><a href="#">test 2</a> 
    <div class="sub-nav"> 
    <p> <a href="#">link </a> <a href="#">link </a> <a href="#">link </a> </p> 
    </div> 

    </li> 
<li><a href="#">test 3</a> 
    <div class="sub-nav"> 
    <p> <a href="#">link2 </a> <a href="#">link3</a> <a href="#">link4 </a> </p> 
    </div> 

</li> 
<li><a href="#">test 4</a></li> 
</ul> 
    </div> 

我想要做的時候就李鼠標懸停，它會顯示相應的內容部分（sub-nav）。當鼠標離開li時，相應的部分將被隱藏。

.sub-menu css is display:none; 

以下是我的代碼，但不起作用。

$(function(){ 

    $("#nav ul li").mouseenter(function() { 
     $(this).find(".sub-menu").show(); 
    }); 
}); 

Answer 1

檢查你在標記CSS和JavaScript，但.sub-nav.sub-menu類。

這裏是工作的解決方案：

$("#nav ul li").hover(function() { 
    $(this).find(".sub-nav").show(); 
}, function() { 
    $(this).find(".sub-nav").hide(); 
});​ 

DEMO：http://jsfiddle.net/e8GYJ/

Answer 2

嘗試hover()事件回調：http://api.jquery.com/hover/

Answer 3

$("#nav ul li").mouseenter(function() { 
     $(this).find(".sub-menu").show(); 
    }.mouseleave(function(){ 
     $(this).find(".sub-menu").hide(); 
    }); 

退房這段代碼...

希望這可以幫助你

Answer 4

嘗試用戶hover功能：

$("li").hover(
    function() { 
    $(this).find(".sub-menu").show(); 
    }, 
    function() { 
    $(this).find(".sub-menu").hide(); 
    } 
);