保持大型菜单可见，直到使用 jQuery 进入另一个锚点

Question

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

我正在使用 jQuery 来 select 元素。

这是标记结构：

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

其中还嵌套了相应的 div 元素，即代表大型菜单的 collapsible__content。

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

$('.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

试试这个：

$('.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');
})

Answer 2

首先，您的 selector 无效。尝试 select 来自 this 引用的子元素时需要使用 find()：$(this).find('.collapsible > .collapsible_content')。

其次，mousemove()不接受多重功能。假设您希望 add/remove mouseenter/mouseleave 上的 class 您可以使用 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只是hiding/showing内容。如果没有，您只需将相关样式复制到上面即可。

保持大型菜单可见，直到使用 jQuery 进入另一个锚点

Keep a mega-menu visible until entering another anchor using jQuery

javascript

css

jquery

megamenu