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

我理解以下内容。主导航应该执行以下操作

悬停更改背景颜色并显示匹配的子导航
on mouseout保持主导航的背景颜色并显示子导航
除非另有主要导航悬停，然后删除背景颜色，并从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

如果您需要任何指示，请告诉我。如果您发现它有用，我们将非常感谢您的推特。

Answer 2

我在Javascript中使用了两个函数：

        function styleAdd(ca) { 
 document.getElementById('Home').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Portfolio').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Tutorials').className = document.getElementById('Contact').className.replace('duck','');
 document.getElementById('Contact').className = document.getElementById('Contact').className.replace('duck','');

 document.getElementById(ca).className += " duck";
}

其中duck是我的CSS类，包含适用于顶部导航栏的样式以及HTML

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

Answer 3

为了它的乐趣，我采取了你的方法，并试图进一步缩短它。我做了 a demo plunk ，显示与之前的插件相同。这是代码

从所有主导航条目中删除样式的辅助方法

function setHoverStyle(mainNavId, mainNavIds) { 
   // console.log('mainNavIds: ' + mainNavIds);
   for (i = 0; i < mainNavIds.length; ++i)
   {
      document.getElementById(mainNavIds[i]).className = 
           document.getElementById(mainNavIds[i]).className.replace('duck','');
   }
   document.getElementById(mainNavId).className += " duck";
};

辅助功能，用于添加子导航条目

function setSubNav(navClass, subNavigationItems)
{
    var elSubNav =document.getElementById('mainNav_Drop'); 
    var subNavList ="";
    for (i = 0; i < subNavigationItems.length; ++i)
    {
        subNavList += "<li class='" + navClass +"'><a href='#'>" 
                              + subNavigationItems[i] +"</a></li>";         
    }
    elSubNav.innerHTML =subNavList; 
    return;
};

将所有部分组合在一起的重构功能

function navHover(id){

    var mainNavIds = ['Home', 'Portfolio', 'Tutorials', 'Contact'];
    var subNavigation = {};
    subNavigation['Home'] = ['Home'];
    subNavigation['Portfolio'] = ["Qualifications", "Services"
                                  , "Portfolio", "Case Studies"];
    subNavigation['Tutorials'] = ["HTML5", "CSS3", "WordPress", "Design"];
    subNavigation['Contact'] = ['Contact'];
    setHoverStyle(id, mainNavIds);
    setSubNav(id, subNavigation[id]);
};

如果特定内容存在或悬停，则为Javascript样式

3 个答案:

工作演示