jquery 弹出菜单：当光标移动到其同级时，使父级 li 保持相同的颜色

发布于 2024-10-27 20:30:58 字数 829 浏览 5 评论 0原文

我有这个弹出菜单，其中“二级菜单 3”是弹出窗口。菜单由 CMS 系统生成，因此直接向特定菜单项添加新类受到限制。

默认情况下，第一级菜单有一个“顶级”锚标记类，而第二级和第三级没有。我想要实现的是以“顶级”为目标找到“二级菜单3”来添加“当前”类，这样当弹出菜单展开时，光标移动到第三级，“二级菜单3”具有与悬停相同的白色背景颜色。

代码是 jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')}); 但它是不工作，我根本无法全神贯注地找出我做错了什么。

 $(document).ready(function(){
    $("#nav li li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
    });
  $(document).ready(function(){
      jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')});

原文

I have this flyout menu in which the "2nd level menu 3" is a flyout. The menu is generated by the CMS system so there is restriction to adding new classes directly to a specific menu item.

By default, the 1st level menu has a "top-level" class for anchor tag while 2nd and 3rd level don't have. What I want to achieve is to target the "top-level" to find the "2nd level menu 3" to add a "current" class, so that when flyout menu expanded, and cursor moves to the third level, the "2nd level menu 3" has the same white background color as the hover does.

The code is jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')}); but it's not working and I simply can't wrap my head to finding what I did wrong.

 $(document).ready(function(){
    $("#nav li li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
    });
  $(document).ready(function(){
      jQuery('#nav ul').find('> a.level-top').parent('li').addClass('current')});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵山崖 2024-11-03 20:30:58

去掉你的父选择器“>”在查找函数中。

我会更接近它

$('>li>ul>li').parent('ul>li').hover(function(){
    $(this).css(backgroundColor: 'red'

，但在你做那个朋友之前，你的列表代码是非常混乱的。不要忘记关闭您的列表项，如果您使用自动生成此代码的 CMS，请尝试其他操作:)

get rid of your parent selector '>' in the find function.

I'd approach it more like

$('>li>ul>li').parent('ul>li').hover(function(){
    $(this).css(backgroundColor: 'red'

but before you do that buddy, your list code is mega messed. don't forget to close you list items, and if you're using a CMS that auto-generates this code then try something else :)

回复收藏 0 原文

~没有更多了~