Question

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

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

感谢。

Answer 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/

Answer 2

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

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

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

Answer 3

您应该在悬停中取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();
    }
  );
});

Answer 4

这是可以帮助你的东西

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

);

});

li元素悬停事件和显示子菜单？

4 个答案: