javascript - 保持大型菜单可见，直到使用 jQuery 输入另一个 anchor

Question

我有一个菜单，只要用户在该菜单中，我就希望显示一个子菜单；就像您在大型菜单中找到的一样。

我正在使用 jQuery 来选择元素。

这是标记结构:

如您所见，每个 <li>即 global-nav__list-item包含一个 anchor ，代表主导航中的一个元素。

里面还嵌套了对应的div元素即 collapsible__content代表 super 菜单。

我认为这个脚本可以向下钻取并简单地添加和删除类 collapsible__content--expanded在 collapsible__content这将解决我的问题。

$('.global-nav__list-item').mousemove(function() {
   $(this > '.collapsible > .collapsible_content').addClass('collapsible__content--expanded');
}, function(){
   $(this > '.collapsible > .collapsible_content').removeClass('collapsible__content--expanded');
})

我做错了什么？

Answer 1

首先，您的选择器无效。尝试从 this 引用中选择子元素时需要使用 find():$(this).find('.collapsible > .collapsible_content') 。

其次，mousemove() 不接受多个函数。假设您希望在 mouseenter/mouseleave 上添加/删除类，您可以使用 hover 以及 toggleClass():

$('.global-nav__list-item').hover(function() {
  $(this).find('.collapsible > .collapsible_content').toggleClass('collapsible__content--expanded');
});

更好的是，您可以单独使用 CSS 来实现此目的:

.global-nav__list-item .collapsible > .collapsible-content {
  display: none;
}

.global-nav__list-item:hover .collapsible > .collapsible-content {
  display: block;
}

以上假设 .collapsible__content--expanded 只是隐藏/显示内容。如果没有，您只需将相关样式复制到上面即可。