Снова установите текущую ссылку меню на «активную» после остановки навигации по меню.

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)

Что я пытаюсь сделать, это когда пользователь перестанет перемещаться по моему меню и переместит курсор мыши за пределы контейнера навигации (скажем,), вернув "active" к "Active link link", которая был изначально активен, возможно, с некоторым таймаутом.

Надеюсь, я достаточно ясно понял, чего я пытаюсь достичь.

Спасибо, Адриан

Answer 1

Это должно работать. Если вам нужны объяснения, просто прокомментируйте ответ

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));
});

Answer 2

Я не совсем понимаю, что вы хотите сделать, но похоже, что вы ищете событие jQuery hover () , которое срабатывает, когда мышь входит в соответствующий элемент и вызывает ответный вызов. функционировать, когда он уходит.

$('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"> и т. Д. - идентификаторы вместо классов, чтобы однозначно идентифицировать эти элементы.

Что именно означает // do stuff, зависит от того, что именно вы ищете, но, вероятно, простое добавление и удаление класса active подойдет вместо использования класса inactive.

Answer 3

Я не ищу только событие .hover () в jQuery, оно немного больше.

Я уже использую событие jQuery .hover (), чтобы добавить к текущей ссылочной ссылке класс «активный», а для других - класс «неактивный».

Но на активной странице "активный" класс от меня устанавливается вручную, и я хочу, чтобы он снова был активным, когда пользователи прекратят навигацию по моему меню. Я имею в виду, что когда я играю с меню и наведя на него ссылки, он выполняет то, о чем я говорил (добавление активного класса к текущему, добавление неактивного класса к другим) - когда я наведите курсор мыши на область навигации, я хочу, чтобы «активный» класс «Вернитесь» снова к исходной ссылке, у которой было то имя класса, когда я впервые зашел на эту страницу.

У меня также есть некоторые подменю, которые отображаются при наведении, но я думаю, что это не так важно для моего вопроса.

Answer 4

Что-то вроде:

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 на большее / меньшее время ожидания, прежде чем «перезагрузить» меню.