li元素懸停事件並顯示子菜單？

HTML代碼li元素懸停事件並顯示子菜單？

<ul class="menu"> 
<li>deneme</li> 
<li>deneme 
    <ul> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
    </ul> 
</li> 
<li>deneme 
    <ul> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
    </ul> 
</li> 
<li>deneme</li> 
<li>deneme</li> 
<li>deneme 
    <ul> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
     <li>alt menu</li> 
    </ul> 
</li> 
<li>deneme</li> 
</ul>

的javascript：

$(document).ready(function(){ 
    $("ul.menu > li").css("color","red"); 
    $("li ul li").css("color","blue") 
    $("li ul li").hide(); 
    $("ul.menu li").hover(
     function() { 
      $("li ul li").show(); 
     }, 
     function() { 
      $("li ul li").hide(); 
     } 
    ); 
});

我的問題，我想表明當前與懸停事件子菜單項。但是這段代碼顯示了所有的子菜單。我該如何解決它？

謝謝。

來源

2012-07-06 AliRıza Adıyahşi

修復您的選擇，只取'this'是子列表項。 – TheZ 2012-07-06 22:20:17

我找不到正確的選擇器語法。 – 2012-07-06 22:21:20

1.始終在問題本身中包含相關的代碼和標記**，請不要鏈接：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or - 相似的代碼提問2.通過閱讀你的問題並在發佈之前修正最糟糕的錯別字，向社區表達一些基本的尊重。 – 2012-07-06 22:25:32

爲懸停處理程序中的元素選擇提供上下文。

試試這個：

$(document).ready(function() { 

    $("ul.menu > li").css("color", "red"); 
    $("li ul li").css("color", "blue") 
    $("li ul li").hide(); 
    $("ul.menu li").hover(

    function() { 
     $("ul li", this).show(); 
    }, function() { 
     $("ul li", this).hide(); 
    } 

    ); 

});

工作例如：http://jsfiddle.net/eygsY/22/

來源

2012-07-06 22:22:11 Chandu

http://jsfiddle.net/eygsY/24/

您的選擇提供上下文（只搜索以下this，而不是整個文件）：

function() { 
    $("ul li", this).show(); 
}, function() { 
    $("ul li", this).hide(); 
}

來源

2012-07-06 22:22:15 Esailija

你應該在懸停中採用this，這將是您的LI，用戶將鼠標懸停在上面，並在其中找到li並顯示它們。像下面（jsFiddle）：

$(document).ready(function(){ 

    $("ul.menu > li").css("color","red"); 
    $("li ul li").css("color","blue") 
    $("li ul li").hide(); 
    $("ul.menu li").hover(
    function() { 
     $(this).find("li").show(); 
    }, 
    function() { 
     $(this).find("li").hide(); 
    } 
); 
});

來源

2012-07-06 22:22:16 scottheckel

這裏的東西，可以幫助你

$(document).ready(function(){ 

$("ul.menu > li").css("color","red"); 
$("li ul li").css("color","blue") 
$("li ul li").hide(); 
$("ul.menu li").hover(
    function() { 
    $(this).find("li").slideDown('slow'); 
    }, 
    function() { 
    $(this).find("li").slideUp('slow'); 
    } 

); 

});

來源

2012-07-06 22:28:29

這比別人好。謝謝 – 2012-07-06 22:43:56

li元素懸停事件並顯示子菜單？

回答

相關問題