Создание простого выпадающего меню с помощью JQuery и CSS

Question

У меня возникли проблемы с созданием выпадающего меню с помощью jquery/css.

В настоящее время каждое выпадающее меню для каждой категории является div, у которого есть скрытый экран, пока не будет виден категория. Я пытаюсь сделать jquery show/hide правильные divs на hover и mouseleave.

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

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

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

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

Я знаю, что это может быть достигнуто с гораздо меньшим количеством кода :) Пожалуйста, имейте в виду, что я очень новичок в JQuery. Также имейте в виду, что я хотел бы сохранить настройку DIV для выпадающих меню, и я не использую списки.

Вот мой JQuery код:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#productsLink").hover(function(){ 
      $("#productsMenu").slideDown(); 
     }); 
     $("#productsLink, #productsMenu").hover(function(){ 
      $("#productsLink").css("color","red"); 
     }); 
     $("#productsMenu").mouseleave(function(){ 
      $("#productsLink").css('color', 'white'); 
      $("#productsMenu").slideUp(); 
     }); 
     $("#aboutLink").hover(function(){ 
      $("#aboutMenu").slideDown(); 
      $(this).css("color","red"); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutMenu").hide(); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutLink").css('color', 'red'); 
     }); 
     $("#aboutMenu").mouseleave(function(){ 
      $("#aboutLink").css('color', 'white'); 
     }); 
    }); 
    </script> 

Answer 1

Эта проблема меньше о ваших JS и больше о разметке. Самый простой способ решить эту проблему - обернуть как ваш пункт меню, так и выпадающий список для каждого элемента в одном div и вызвать события зависания на этом конкретном div.

<div id="nav-item1"> 
     <a id="nav-link1">nav item</a> 
     <div id="dropdown1">Some Stuff</div> 
</div> 

Таким образом, пока что-то в нав-ITEM1 DIV завис над (по ссылке или меню) она будет видна.

Есть способы сделать это с помощью jQuery, но это простое исправление, которое будет использовать намного меньше кода. Имейте в виду, что каждое из этих событий является отдельным. Вот почему вы получаете странное поведение с двойной анимацией. Наведение по ссылке вызывает одно из ваших событий, наведение над меню вызывает второе событие. Возможно, вы сможете остановить это с помощью некоторых операторов if, но не делайте это более сложным для себя, чем это должно быть.