jquery - jQuery如果元素有类添加类到'this'

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)contains $(menuItem)as Event 正在被调用$(menuItem)。

Answer 2

在您的代码中当您将鼠标悬停在$(menuItem)then 当您使用时this，它指的是$(menuItem)not $(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 3

利用，

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

代替

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

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

演示：小提琴