Question

我有以下jQuery函数：

$(function(){
            if ($(".menu li").hasClass("active")) {
                    $(".active").css("margin-top", "6px");
              }
        });

这适用于CSS / jQuery菜单，当每个菜单项悬停时，该菜单会扩展和收缩。 onClick事件会添加margin-top of 6px以显示按钮按下的展示次数。

然后我使用PHP来检测用户正在访问的页面，以便将.active类添加到相关的菜单项。

问题是，.active类应该保留在，直到用户将鼠标悬停在不同的菜单项上。此时应该从此元素中删除.active类 - 因为.active类在.hover事件中被重用。

以下是基本的HTML标记：

<ul id="menu">
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
</ul>

如何将.active类应用于活动菜单项，但在.inner悬停时将其删除？

Answer 1

你可以这样做：

$(".menu li.active").addclass("onPage");
$(".menu li").hover(function() {
  $(".menu li.active").removeClass("active");
  $(this).addClass("active");
}, function() {
  $(this).removeClass("active");
  $(".menu li.onPage").addClass("active");
});

此代码执行以下操作：

将占位符类分配给原始active（由PHP分配）。
在悬停时，从所有active兄弟中删除<li>类，并将悬停设置为active。
在离开悬停时，它会从自身中删除active并选择占位符并将其恢复为原始版本（他们所在的页面）。

Answer 2

您只需选择具有div类的active，然后删除该类：

$('div.inner').hover(function() {
    $('div.active').removeClass('active');
});

jQuery - IF然后删除.hover上的类

2 个答案: