jQuery添加/删除类到非兄弟DIV ID?

时间:2012-12-05 18:57:26

标签: javascript css

我对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

1 个答案:

答案 0 :(得分:1)

将其他子菜单ID添加到add class函数应该这样做。如果您的悬停类具有除隐藏/显示类之外的其他显示质量,您也可以使用.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);
    });