悬停并单击 li 元素更改 class

Question

我正在尝试创建侧边导航，但我没有使用 jQuery 的经验。

我想要做的是，当鼠标悬停在除活动元素之外的任何其他 li 元素上时，悬停的元素会获得 .active class 并且初始元素会删除 class 但是当鼠标离开时元素而不单击它 .active class 再次转到第一个 li 元素，除非它被单击。我希望你明白了。

我尝试用 .hover 做悬停的事情，但我不知道如何在鼠标离开时恢复到初始 html 以及如何同时实现 .click 功能。

$("#nav li").hover(function() {
    $("#nav li").removeClass("active");
    $(this).addClass("active");                   
    return false;
}, 
function () {
     $(this).removeClass("active");
});

这是我的 HTML:

<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

Answer 1

考虑其他 jquery 鼠标事件： .mouseover() .mouseenter() .mouseleave() ... 以及更多：https://api.jquery.com/category/events/mouse-events/

Answer 2

你差不多明白了。您不需要第一个悬停功能中的 "return false;"。这可能会干扰执行。这仅在点击事件中需要，因为您正在中断重新加载页面的默认 link 行为。

您还需要在第二个函数中再次将活动 class 添加到第一个列表项。

$("#nav li").hover(
   function() {
       $("#nav li").removeClass("active");
       $(this).addClass("active");                   
    }, 
   function () {
      $(this).removeClass("active");
      $("#nav li").first().addClass("active");  
   }
);

Answer 3

你的代码差不多搞定了，你可以查看下面的代码片段以获得完整的工作结果。

$("#nav li").hover(function() 
 {
   $("#nav li").removeClass("active");
   $(this).addClass("active");                   
   return false;
 }, 
 function () 
 {
   $("#nav li").removeClass("active");
   $("#nav li:first").addClass("active");
 }
);

.active
{
   background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

Answer 4

这是一个有效的 JSFiddle。我需要将事件拆分为悬停、单击和鼠标离开，因为你想对每个事件执行不同的操作。我还使用了变量 sticky 以便它可以记住哪个是活动元素。

https://jsfiddle.net/yvLuLwon/3

如果我误解了你的问题，请评论，我会改正。

悬停并单击 li 元素更改 class

Hover and click on li element change class

html

javascript

jquery

hover