javascript - 如果存在或悬停特定内容，则为 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>"
        }
}

score 1 · Accepted Answer

我已经理解了以下内容。主导航应该做到以下几点

悬停时更改背景颜色并显示匹配的子导航
在 mouseout 上保持主导航的背景颜色并显示子导航
除非悬停另一个主导航然后放下背景颜色并从 1 开始新的主导航

工作演示

请看一下我在 plunk 上的完整工作演示，它演示了上述内容。

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

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

如果您需要任何指示，请让我知道，如果您觉得它有用，请随时支持。

score 1 · Accepted Answer

我在我的 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";
}

其中鸭子是我的 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>

score 0 · Accepted Answer

为了好玩，我采用了您的方法并尝试进一步缩短它。我做了一个演示 plunk，显示与之前的 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 - 如果存在或悬停特定内容，则为 Javascript 样式

3 回答 3

工作演示

Related

Reference