Пользовательский выпадающий JQuery

Question

Я создаю собственный простой выпадающий список, используя jQuery, который скрывает / показывает элемент, основанный на состоянии over.

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

Любые мысли о том, как это исправить, есть ли более простой способ сделать то, что у меня есть? Я собираюсь использовать это повторно и не уверен, что лучший способ настроить код, так как мне не нужно копировать / вставлять шесть раз.

$(function(){
    $("#dog-nav").hover(
      function(){
        $(".sub-drop-box-dog").show("fast");
      }, 
      function(){
        $(".sub-drop-box-dog").hide("fast");
      }
    );
    $("#cat-nav").hover(
      function(){
        $(".sub-drop-box-cat").show("fast");
      }, 
      function(){
        $(".sub-drop-box-cat").hide("fast");
      }
    );

});

Answer 1

Вы должны использовать HTML следующим образом:

<div id="#menu">
  <ul>
    <li>
      <a href="#">Menu1</a>
      <ul>
        <li><a href="#">Submenu A</a></li>
        <li><a href="#">Submenu B</a></li>
        <li><a href="#">Submenu C</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu2</a>
      <ul>
        <li><a href="#">Submenu D</a></li>
        <li><a href="#">Submenu E</a></li>
        <li><a href="#">Submenu F</a></li>
      </ul>
    </li>
  </ul>
</div>

А потом jQuery вот так:

$("#menu li").hover(function() {
  $(this).find("ul").show("fast");
}, function() {
  $(this).find("ul").hide("fast");
});

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

Answer 2

Чтобы устранить ошибку пилотирования мыши, вы должны проверить плагины jQuery.hoverIntent и / или jQuery.superfish .