0

html代码

<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();
        }
    );
});​

我的问题是，我想用悬停事件显示当前的子菜单项。但是此代码显示所有子菜单。我该如何解决？

谢谢。

4

4 回答 4

1

为悬停处理程序中的元素选择提供上下文。

试试这个：

$(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-06T22:22:11.183 回答
1

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

为您的选择器提供上下文（仅在下面搜索this，而不是整个文档）：

function() {
    $("ul li", this).show();
}, function() {
    $("ul li", this).hide();
}
于 2012-07-06T22:22:15.343 回答
1

您应该接受用户悬停在this您LI的悬停，并找到其中的lis 并显示它们。如下所示（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-06T22:22:16.320 回答
1

这里有一些可以帮助你的东西

 $(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-06T22:28:29.180 回答