Question

我想要突出显示导航栏的第二级父级，当它悬停在任何一个孩子身上时;顶级具有完全不同的造型，因此不适用于我正在尝试做的事情，所以当我将鼠标悬停在任何第三级项目上时，我想要设置第二级别的样式。我理解javascript / jquery是这样做的方式因为我的技能不是很划伤我已经碰到了一堵砖墙。

这是我的标准html导航结构：

<nav class="primary-navigation">
     <ul>
         <li><a href="#">TOP LEVEL</a>
             <ul>
                 <li><a href="#">SECOND LEVEL</a>
                     <ul>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>
                         <li><a href="#">THIRD LEVEL</a></li>                    
                     </ul>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

我一直试图在没有课程的情况下工作，但是我在选择没有它们的项目时遇到了麻烦，理想情况下如果有可能我想学习如何在没有课程的情况下完成它。

到目前为止我已经走了多远，但它似乎也为所有孩子添加了“突出显示”类，但我只是想将它应用于父项目！

$('THIRD LEVEL').mouseenter(function() {
      $(this).parent().closest('SECOND LEVEL').addClass('highlighted');
  }).mouseleave(function() {
      $(this).parent().closest('SECOND LEVEL').removeClass('highlighted');
  });

提前致谢

Answer 1

如果这只是在第三级应用，这应该足够了：

$('.primary-navigation ul ul ul li').hover(
    function(){
        $(this).parent().parent().addClass('highlighted');
    },
    function(){
        $(this).parent().parent().removeClass('highlighted');  
    }
);

当鼠标悬停在第三级li时，突出显示导航栏中的第二级li

1 个答案: