javascript - jQuery 添加/删除类到非同级 DIV ID？

Question

我是 Javascript 的新手，我在使用以下脚本时遇到问题:

// Keep Focus On Site Menu //
function menuFocus() {
    $('#menu').addClass('hover');
}

function menuBlur() {
    $('#menu').removeClass('hover');
}

$(document).ready(function() {
    $('#submenu-mgmt').hover(menuFocus,menuBlur);
});

$(document).ready(function() {
    $('#submenu-label').hover(menuFocus,menuBlur);
});

本质上，当用户悬停在使用两个单独的 DIV ID 的二级菜单系统上时，我试图在非同级 DIV ID 上保持“悬停”效果。我将其设计为包括 3 个 DIV ID，“#Menu”是标题菜单区域。 “#Submenu-Mgmt”和“#Submenu-Label”都在到达时隐藏，但可以通过单击显示/隐藏 DIV 的链接打开。

这是一个针对当前事件页面的问题——虽然这个问题不会影响网站的成败，但它会是一个很好的触摸，因为当用户的鼠标悬停在子菜单上时，菜单区域会失去焦点。

有问题的页面:http://www.parkthevan.com/index.php .

Answer 1

将额外的子菜单 ID 添加到添加类函数应该可以做到。如果您的悬停类除了隐藏/显示类之外还有其他显示质量，您也可以使用 .css。我会把它们都包括在这里。 :)(注意//是 javascript 中的注释)您还想对删除执行相同的操作 - 您只需要准备好一次文档。

    function menuFocus() {
       $('#menu, #submenu-mgmt, #submenu-label').addClass('hover');
       // or
       //$('#submenu-mgmt, #submenu-label').css('display', 'block');
    }

    function menuBlur() {
       $('#menu, #submenu-mgmt, #submenu-label').removeClass('hover');
       // or
       //$('#submenu-mgmt, #submenu-label').css('display', 'none');
    }

    $(document).ready(function() {
       $('#submenu-mgmt').hover(menuFocus,menuBlur);
       $('#submenu-label').hover(menuFocus,menuBlur);
    });