javascript - 在父列表悬停时显示嵌套列表

Question

我有一个菜单结构，其中子菜单以嵌套列表的形式出现，如下所示

<nav>
<ul>
<li class="itm">A
    <ul>
        <li>One</li>
        <li>Two
            <ul>
                <li>Menu Item</li>
                <li> Menu Item </li>
                <li> Menu Item </li>
            </ul>
        </li>
        <li> Three </li>
        <li> Four </li>
    </ul>
</li>

<li class="icon"><span class="img"></span></li>
<li class="itm">B</li>
<li class="itm">C</li>
</ul>
</nav>

现在我想在光标悬停在父级上时显示子菜单（子列表），li为此我正在这样做：

$('nav ul li').hover(function () {
    console.log(this);
    $(this > ul).fadeIn();
}, function () {
    $(this > ul).fadeOut();
});

但是在悬停时，它会在 JS 控制台中显示此错误：Uncaught ReferenceError: ul is not defined

Answer 1

您的选择器正在组合this，这是一个文字，应该是选择器 ( > ul) 中的字符串。ul被视为变量，并且该ul变量不存在。

尝试这个：

http://jsfiddle.net/cyzsw/

$(this).children('ul').fadeIn();