悬停并单击 li 元素更改类答案

【问题标题】：Hover and click on li element change class悬停并单击 li 元素更改类
【发布时间】：2016-05-29 03:15:02
【问题描述】：

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

我想要做的是，当悬停在除活动元素之外的任何其他 li 元素上时，悬停的元素会获得 .active 类，并且初始元素会删除该类，但是当鼠标离开该元素而不单击它时，.active 类会再次出现到第一个 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>

【问题讨论】：

标签： javascript jquery html hover

【解决方案1】：

你的代码差不多了，你可以查看下面的代码 sn-p 以获得完整的工作结果。

$("#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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

https://jsfiddle.net/yvLuLwon/3

如果我误解了您的问题，请发表评论，我会解决它。

【讨论】：

【解决方案4】：

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

【讨论】：