Javascript 在使用jQuery进入另一个锚之前，保持一个超级菜单可见

我有一个菜单，我想一个子菜单出现，只要用户是在该菜单；就像你在大型菜单中看到的一样

我使用jQuery来选择元素

这是标记结构：

如您所见，每个

，即

全局导航列表项

包含一个表示主导航中元素的锚定

还嵌套了相应的

div

元素，即

可折叠的内容

，它表示mega菜单

我认为这个脚本可以向下钻取并简单地添加和删除类

可折叠内容--
可折叠内容
上的扩展

，这将解决我的问题

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

我做错了什么？

试试这个：

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

---

首先，您的选择器无效。尝试从

此

引用：

$（this）.find（'.collapsable>.collapsable\u content'）

中选择子元素时，需要使用

find（）

其次，

mousemove（）

不接受多个函数。假设您希望在mouseenter/mouseleave上添加/删除类，您可以使用

悬停

，以及

切换类（）

：

更好的是，您可以单独使用CSS来实现这一点：

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

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

---

以上假设

.collapsable\uu内容--expanded

只是隐藏/显示内容。如果没有，您只需将相关样式复制到上面。

谢谢Rory！！那没用。但我怀疑一定是发生了什么事！我试过：

$（'.global-nav_uulist-item'）.hover（函数（e）{console.log（e，target）；$（this.find（'.collapsible>.collapsible_ucontent'）.toggleClass（'collapsible_ucontent--expanded'）；）以确保脚本被注册，我确实看到元素被记录，但没有其他功能…实际上这是可行的！在我的
DOM
中，我有一个样式
。可折叠的内容
不是
。可折叠的内容
.global-nav__list-item .collapsible > .collapsible-content {
  display: none;
}

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