JQuery раскрывающаяся навигация с использованием неупорядоченных списков

Question

Я пытаюсь сделать раскрывающийся список навигации с помощью jQuery, который выглядит следующим образом:

<ul id="home" >
    <li class="navtab"><a href="#">TABANME</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
</ul>

<li> .navtab виден постоянно - элементы подменю начинают скрываться. Я прикрепил .hover () к элементу <ul> (#home), но когда курсор входит в элементы <li> подменю, срабатывает указатель мыши на #home, а элементы подменю скрываются.

Я знаю, что это связано с всплытием событий и наведением курсора / мышью, но я не могу понять логику того, как держать меню открытым, пока курсор находится над всем <ul>. В настоящий момент у меня есть jQuery:

    $('#thome').hover(
        function(){
           tabShowSubnav($(this).attr('id'))
        },
        function(){
           tabHideSubnav($(this).attr('id'))
        });

function tabShowSubnav(menu){

var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';

$(tb).css('height','239px');
$(sb).show();
}

Есть предложения?

Answer 1

Сделайте себе огромное одолжение и измените структуру разметки меню на:

<ul id="home" >
  <li class="navtab">
    <a href="#">TABANME</a>
    <ul class="submenu">
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
    </ul>
  </li>
</ul>

И поместите событие hover в li.navtab, чтобы подменю стало видимым.Вы найдете это намного проще.Например, CSS:

ul.submenu { display: none; }

с:

$(function() {
  $("li.navtab").hover(function() {
    $(this).children("ul.submenu").show();
  }, function() {
    $(this).children("ul.submenu").hide();
  });
});

, и вы в большинстве случаев там.

Это все, как говорится, я бы весьма предлагают использовать существующий плагин меню jQuery.Есть много о них.У меня был относительно хороший опыт работы с superfish .Нет особого смысла изобретать это колесо.