Question

我正在尝试创建一个菜单，如果用户在'menuItem'上悬停，它将仅显示该特定元素的子菜单。

我知道你可以使用$（this）但是当我改变

时在jQuery中

$(subMenu).removeClass("hide-submenu").addClass("show-submenu");

到

$(this).removeClass("hide-submenu").addClass("show-submenu");

它似乎无法正常工作

var menuItem = $("nav > ul > li > a");

var subMenu = $("ul > li > ul");


$(subMenu).addClass("hide-submenu");

$(menuItem).hover(function(){
if($(subMenu).hasClass("hide-submenu")) {
        $(subMenu).removeClass("hide-submenu").addClass("show-submenu");
}
else {
        $(subMenu).removeClass("show-submenu").addClass("hide-submenu");
}
});

以下是我的HTML

<nav>
    <ul>
        <li>
            <a>MENU ITEM</a>
                <ul>
                    <li><a href="#">SUB ITEM 1</a></li>
                    <li><a href="#">SUB ITEM 2</a></li>
                    <li><a href="#">SUB ITEM 3</a></li>
                </ul>
        </li>

    </ul>
</nav>

Answer 1

因为在$(this)上调用了事件，$(menuItem)包含$(menuItem)。

Answer 2

使用，

var menuItem = $("nav ul li a");
var subMenu = $("ul li ul");

而不是

var menuItem = $("nav > ul > li > a");
var subMenu = $("ul > li > ul");

Answer 3

当您将代码悬停在$(menuItem)内，然后当您使用this时，它会引用$(menuItem)而不是$(subMenu)。因此，您不能在此处使用this，就像您想要使用它一样。相反，你可以这样做：

menuItem.hover(function () {

    // Go to the next sibling `ul` in the current scope, using `this`
    var $next = $(this).next('ul');  

    if ($next.hasClass("hide-submenu")) {
        $next.removeClass("hide-submenu").addClass("show-submenu");
    } else {
        $next.removeClass("show-submenu").addClass("hide-submenu");
    }
});

还有一件事：

var menuItem = $("nav > ul > li > a");

menuItem在这里已经是一个jQuery对象，你不需要再次$(menuItem)。同样适用于subMenu。

Answer 4

你可能想要

$("ul > li > ul").addClass("hide-submenu");

var menuItem = $("nav > ul > li");
menuItem.hover(function(){
    $(this).children('ul').removeClass("hide-submenu").addClass("show-submenu");
}, function(){
    $(this).children('ul').removeClass("show-submenu").addClass("hide-submenu");
});

演示：Fiddle

jQuery if element有类将class添加到'this'

4 个答案: