Question

好吧，也许你对标题不太了解，所以我会在这里尝试解释一下。基本上我有一个导航，像这样：

<ul class="primaryNav"> 
  <li class="nav1"><a href="#" class="inactive"  title="About us">About us</a></li> 
  <li class="nav2"><a href="#" class="inactive"  title="Our world">Our world</a></li>
  <li class="nav3"><a href="#" class="active"  title="Active menu link">Active page</a></li>
</ul>

现在我正在“活动页面”页面上，“活动菜单链接”处于活动状态，如您所见（该类是由我在每个页面上手动设置的）。用户可以浏览其他菜单（将它们悬停）并激活，我的“活动菜单链接”处于非活动状态，依此类推。（通过jQuery）

嗯，我正在尝试做的是，一旦用户停止浏览我的菜单，并将鼠标光标移动到导航容器外（让我们说），设置回“激活”“活动菜单链接”最初是活跃的，可能有一些超时。

希望我对我正在努力实现的目标非常清楚。

谢谢，阿德里安

Answer 1

类似的东西：

var resetMenu = function() {
    $('li.active').attr('class','active').siblings().attr('class','inactive');
};
var to;

$('ul').bind('mouseout', function() {
    window.clearTimeout(to);
    to = window.setTimeout(resetMenu, 1000);
});

我正在使用attr()而不是根据您的示例添加/删除类名。在“重置”菜单之前，您可以在更多/更少的时间内更改1000。

Answer 2

我不完全清楚你想做什么，但听起来你正在寻找jQuery hover() event，当鼠标进入匹配元素时会触发，而当它离开时会触发回调函数。

$('ul.primaryNav').hover(function() {
    // do stuff when the mouse enters the <ul> 
  }, 
  function() {
    // do stuff when the mouse leaves the <ul>
});

我怀疑您可能打算使用<ul id="primaryNav">和<li id="Nav1">等-id而不是类来唯一标识这些元素。

// do stuff究竟意味着什么取决于您正在寻找什么，但可能只是添加和删除active类，而不是使用inactive类。

Answer 3

我不是在寻找jQuery中的.hover（）事件，只不过是。

我已经在使用jQuery .hover（）事件将当前悬停链接添加到“活动”类，并将其他类添加到“非活动”类。

但是在“活动”页面中，“活动”类是由我手动设置的，当用户停止通过我的菜单导航时，我希望它再次处于活动状态。我的意思是，当我使用菜单并悬停链接时，它会执行我告诉您的内容（将类添加到当前，将类添加到其他人不活动） - 当我将鼠标移出导航区域时，我希望“活动”类到当我第一次进入该页面时，“再次”返回到具有该className的初始链接。

我还有一些子菜单，它们在悬停时显示，但我想这与我的问题不太相关。

Answer 4

这应该有效。如果您需要解释，只需评论答案

var as;
var ul = $('ul.primaryNav').mouseout(function() {
    toogle(
        as.filter('.active'),
        as.filter(function() {
            return $(this).data('originalActive') === true;
        })
    );
});

as = ul.find('a');
//remember which one was original active
as.filter('.active').data('originalActive', true);

function toogle(ina, act) {
    ina.removeClass('active').addClass('inactive');
    act.removeClass('inactive').addClass('active');
};

as.mouseover(function() {
    //make current active, inactive others
    toogle(as.filter('.active'), $(this));
});

一旦导航菜单停止，再将当前菜单链接重新设置为“活动”

4 个答案: