Анимированное меню jQuery # функция наведения ()

#jquery

Вопрос:

У меня есть горизонтальное меню, которое анимировано jQuery:

Проблема (ы): у меня есть «текущий» родительский элемент, его ul должен быть показан. Если я наведу курсор на другой родительский элемент, ul, который отображается в данный момент, будет скрыт. Эта форма элемента hoverd должна отображаться и исчезать, если функция hover() «завершена». Все это работает не так, как должно. Вы можете увидеть код на jsfiddler. Пожалуйста, попробуйте навести курсор на ‘Moda’, и вы увидите проблему.

Заранее большое спасибо, Ларс

Ответ №1:

        jQuery("#headnav_primary .top-item").hover(

     function(){

        jQuery('.current-menu-item ul').hide('fast');
         jQuery(this).find('ul').show('slow');

        },    
       function() {
        jQuery(this).find('ul').hide('fast');
           });

Добавьте класс ‘top-item’ в ваш заголовок li ссылки.

1. @AR Я только что сделал обновление для js fiddler. Проблемы все еще существуют. 🙁

2. Я обновил код. У меня работает нормально. я действительно не вижу необходимости специально скрывать .current-menu-item, поскольку он не отображается по умолчанию, поэтому я бы просто полностью удалил эту строку.

3. @AR Пожалуйста, обратите внимание на эту новую скрипку: jsfiddle.net/ZdVbd и не стесняйтесь его изменять. Я изменил это так, как вы описываете, но это не работает.

4. Вы должны добавить класс верхнего элемента ко всем элементам li верхнего уровня (‘Moda’ и т.д.).

5. @AR Я сделал. Извините, забыл об этом. Но: Пожалуйста, наведите курсор на ‘moda’ и попробуйте навести курсор на первый элемент его ‘ul’.

Ответ №2:

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

Вы могли бы изменить код JavaScript jQuery на следующий, который просто скроет все подменю при вводе любого из них <li> и отобразит текущее <li> подменю.

 var subMenus = $("#headnav_primary li ul");

$("#headnav_primary li").mouseenter(function() {
    subMenus.hide();
    $(this).children('ul').show('slow');
}).mouseleave(function() {
    subMenus.hide('fast');
});

Или полностью удалите весь JavaScript и просто добавьте это простое правило CSS, которое отображает подменю при наведении курсора на родительское <li> .

 #headnav_primary li:hover ul {
    display:block !important;
}

Примечание: Это не будет работать в старых браузерах, особенно IE6. Кроме того, я добавил !important это потому, что в настоящее время вы встроили style="display:none" подменю, которое имеет приоритет. Если вы удалите встроенный стиль, вы могли бы удалить !important .

Редактировать: Вот лучшая демонстрация, которая использует только CSS. Это не будет работать в IE6, потому что он поддерживает только теги :hover на привязке. Если вам нужна поддержка IE6, я могу обновить, но для этого будет использоваться jQuery.

1. Пожалуйста, взгляните на скрипку. Я отключил обновление, но все еще есть проблемы. Пожалуйста, наведите курсор на «moda».

2. @Lars ОК, значит, тебе нужна помощь с наведением курсора мыши на подменю. Я знаю, в чем проблемы, и скоро обновлю свой ответ. Не могли бы вы, пожалуйста, сообщить мне, нужно ли вам это для работы в IE6?