Javascript 样式(如果特定内容存在或悬停)

Question

过去几天我一直在与这段代码作斗争，我真的不知道该如何处理它。

基本上，当用户将鼠标滚动到主导航菜单中的某个 LI 元素上时，就会运行一个 Javascript 函数，并根据触发该函数的元素将链接放入下面的 UL (id=mainNav_Drop) 中。

我想做的是设置一个样式

background-color: #000 

在主导航中的 LI 元素上两者，当它悬停在上面并且子菜单中的相关内容存在时(不仅仅是当它悬停在上面时)，然后将此样式设置为被移除并在不同的 LI 元素之间切换，因为它们分别滚动。

请帮助我，我完全不知所措，这是代码。

<ul>
    <li class="mainNav_Home" onmouseover="mainNav_Hover('Home')"><a href="#">Home</a></li>
    <li class="mainNav_Portfolio" onmouseover="mainNav_Hover('Portfolio')"><a href="#">Portfolio</a></li>
    <li class="mainNav_Tutorials" onmouseover="mainNav_Hover('Tutorials')"><a href="#">Tutorials</a></li>
    <li class="mainNav_Contact" onmouseover="mainNav_Hover('Contact')"><a href="#">Contact</a></li>
    <ul id="mainNav_Drop">
            <li class='mainNav_Drop_Home'><a href='#'></a></li>
    </ul>
</ul>

function mainNav_Hover(cls){
    var id=document.getElementById('mainNav_Drop');
    switch(cls){
        case("Home"):
            id.innerHTML="<li class='mainNav_Drop_Home'><a href='#'>Home</a></li>"
            break;
        case("Portfolio"):
            id.innerHTML="<li class='mainNav_Drop_Portfolio'><a href='#'>Qualifications</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Services</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Portfolio</a></li><li class='mainNav_Drop_Portfolio'><a href='#'>Case Studies</a></li>"
            break;
        case("Tutorials"):
            id.innerHTML="<li class='mainNav_Drop_Tutorials'><a href='#'>HTML5</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>CSS3</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>WordPress</a></li><li class='mainNav_Drop_Tutorials'><a href='#'>Design</a></li>";
            break;
        case("Contact"):
            id.innerHTML="<li class='mainNav_Drop_Contact'><a href='#'>Contact</a></li>"
            break;
        default:
            id.innerHTML="<li><a href='#'></a></li>"
        }
}

Answer 1

我已了解以下内容。主导航应执行以下操作

• 悬停时更改背景颜色并显示匹配的子导航
• 鼠标移开时保留主导航的背景颜色并显示子导航
• 除非悬停另一个主导航，然后删除背景颜色并从 1 开始新的主导航

工作演示

请看看我的fully working demo on plunk 证明了上述内容。

创建子导航的辅助函数。请注意 .forEach(...) 并不是每个浏览器都原生的，因此请使用当前的 Firefox、Chrome 进行尝试。有shims / polyfills for forEach或者，如果您需要支持旧版浏览器，则可以替换它。

function setSubNav(navClass, navItems)
{
    // renamed since this returns an element not only an id
    var elNavDrop=document.getElementById('mainNav_Drop'); 
    var subNavList ="";
    // .forEach requires a shim 
    // please see --> https://stackoverflow.com/questions/9329446/
    navItems.forEach(function(navItem) {
        subNavList += "<li class='" + navClass +"'><a href='#'>" + navItem +"</a></li>";
    }); 
    elNavDrop.innerHTML =subNavList; 
    return;
};

以下是从元素中删除 css 类的辅助函数。如果您使用任何库(例如 jQuery)，MooTools , Zepto.js它将被内置。

function removeHoverState(mainNavId, classToRemove){
  // console.log("mainNavId = " + mainNavId);
  // remove class  --> https://stackoverflow.com/questions/2155737/
  document.getElementById(mainNavId).className =
    document.getElementById(mainNavId).className.replace('wasHovered','');

};

这是设置背景的函数。我使用 onMouseOver 向事件元素添加一个附加类。

function navHover(cls){

    // remove the hover class from all entries
    var mainNavIds = ["Home", "Portfolio", "Tutorials"];    
    mainNavIds.forEach(function(mainNavId){
          removeHoverState(mainNavId, "wasHovered")});

    var elMainNav = document.getElementById(cls);    
    if(elMainNav.className.indexOf("wasHovered") == -1) 
    {
            elMainNav.className += " wasHovered";
    };
    switch(cls){
        case("Home"):            
            setSubNav('mainNav_Drop_Home', ["Home"]);
            break;
        case("Portfolio"):
            var naItemsPortfolio = ["Qualifications"
                   , "Services", "Portfolio", "Case Studies"];
            setSubNav('mainNav_Drop_Portfolio', naItemsPortfolio);            
            break;
        case("Tutorials"):
            var naItemsTutorials = ["HTML5"
                   , "CSS3", "WordPress", "Design"];
            setSubNav('mainNav_Drop_Tutorials', naItemsTutorials);              
            break;
        default:
            elNavDrop.innerHTML="<li><a href='#'></a></li>"
        }
};// end of  navHover

如果您需要任何指导，请告诉我，如果您发现它有用，我们将不胜感激。