JQuery меню не работает при перемещении между элементами списка - PullRequest
Новая
       11

JQuery меню не работает при перемещении между элементами списка

0 голосов
/ 22 сентября 2009

Я создал собственное горизонтальное меню jQuery с выпадающими меню. Первоначально оно просто исчезло подменю при наведении на элемент списка и исчезло при удалении.

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

Мой HTML - это стандартный вложенный список, ul # menu> li> ul> li. Мой Javascript выглядит следующим образом: 

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

Работают следующие вещи:

  • Перемещение по верхнему уровню li открывает подменю.
  • Удаление из подменю закрывает его через 2 секунды (в целях тестирования; будет уменьшено в окончательной версии).
  • Отход от подменю и обратно отменяет тайм-аут и, следовательно, останавливает исчезновение меню

Однако это не работает:

  • При переходе от одного элемента списка верхнего уровня к следующему предыдущее подменю не исчезает. Я хочу, чтобы он сразу исчез, без обычной задержки.
  • Если я перемещаюсь по двум элементам списка верхнего уровня, menuVisible устанавливается на false, что приводит к сбоям в системе. Это связано с тем, что cancelTimeout имеет значение true, когда вы перемещаетесь по первому брату, и все еще верно, когда вы переходите ко второму брату.

Буду признателен за понимание того, почему это происходит, и, конечно, как это исправить.

1 Ответ

2 голосов
/ 22 сентября 2009

Вы пробовали плагин jQuery для меню Superfish ?

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

...