MouseOver удалить класс MouseOut восстановить класс

Question

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

Так, например, у нас есть 4 пункта меню (Main 1, Main 2, Main 3, Main 4). У двух есть подменю (Main 2, Main 4). Main 1 в настоящее время активен и имеет класс с именем active. Когда вы наводите курсор на Main 2, отображается подменю, и у Main 2 есть класс зависания и класс hilite при наведении курсора на его подменю, но теперь Main 1 вернулся к нормальному состоянию. Теперь вы уходите от навигации, и Main 1 возвращается к активному классу, а Main 2 выглядит нормально

Теперь возьмите ту же настройку и активируйте Main 2 с его подменю, отображаемым по умолчанию. При наведении указателя мыши на Main 1 Main 3 Main 4 подменю закрывается, и активный класс на Main 2 удаляется, но когда вы уходите, он снова становится активным и показывает свое подменю. Теперь, если вы наведете курсор на Main 2 или его подменю, класс никогда не изменится, он останется прежним.

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

Заранее благодарим и надеюсь, что мне помогут,
Тайлер

EDIT: вот ссылка на старый скрипт на jsfiddle, здесь ОБНОВЛЕНО: 30.04.2011

Answer 1

Обратите внимание, что это работает только в wordpress
Пожалуйста, публикуйте правки в jsfiddle, а не в этом коде, если он не является серьезным

Итак, наконец-то у нас есть рабочее меню. Я провел серьезный поиск и нашел исправление. Теперь я не уверен, правильно это или нет, но он работает так, как я хочу. Если кто-то хочет его использовать, не стесняйтесь. Он используется с WordPress, поэтому у меня есть функция для добавления нескольких строк кода, и я опубликую ее ниже.

Вот функция, которую я добавил в WordPress:

родовое слово

Приведенный выше код предназначен для wordpress 3.0+

Это добавит класс к текущему пункту меню

Пока что jQUERY я как бы добавил кластер вещей, и, вероятно, есть способ объединить все это вместе и заставить его работать как единое целое, но я не знаю, как это сделать, но я опубликую код здесь, а затем демонстрация jsfiddle

Вот сценарий jQUERY, который я собрал вместе и добавит эффект, обнаруженный в демонстрации:

Это добавляет класс .not-active ко всем родительским и не родительским элементам:

родовое слово

Это добавляет класс .child-menu ко всем ul.sub-menu:

родовое слово

Это добавляет класс .first-child к первому дочернему элементу в каждом подменю (добавлен для дополнительного стиля):

родовое слово

Это добавляет класс .last-child к последнему дочернему элементу в каждом подменю (добавлен для дополнительного стиля):

родовое слово

Это переключит класс .not-active в активном меню (удаляет .not-active из последнего скрипта ниже):

родовое слово

Это переключит класс .not-active в активном дочернем меню (удаляет .not-active из последнего скрипта ниже):

родовое слово

Это добавляет класс .parent-active, если присутствует .current-menu-parent:

родовое слово

Это добавляет класс .child-active, если присутствует li.current-menu-parent ul.sub-menu:

родовое слово

* Это добавляет класс .hilite к родительскому при наведении курсора на дочернее меню: *

родовое слово

Это удаляет класс .active активного меню при наведении курсора на другие пункты меню, но не будет использоваться при наведении курсора на активный элемент или дочерние элементы активного элемента:

родовое слово

Теперь, когда у нас есть jQUERY, можно использовать CSS и HTML для справки.

Вот CSS:

родовое слово

Это должно быть довольно просто для чтения

Вот HTML:

родовое слово

Не стесняйтесь использовать этот код, и если вы найдете более простой способ сгруппировать все эти скрипты, сделайте это.

Вы можете увидеть живую демонстрацию здесь, на странице JSFIDDLE