JavaScript / jQuery: глобальная переменная необъяснимо сбрасывается, вызывая проблему сокращения меню

Question

http://jsfiddle.net/VhjR7/1/

Когда вы один раз щелкаете по меню Мои списки , оно расширяется, но при повторном нажатии оно не сокращается.

проблема в том, что listsExpanded необъяснимым образом сбрасывается на false после того, как для него правильно установлено значение true с помощью listsExpand().Это приводит к тому, что проверка в $('#mid-wrap').delegate() снова вызывает неправильный вызов listsExpand() вместо listsContract(), как и должно быть.

Я не могу понять, где или почему происходит этот сброс, но я думаю, что эточто-то делать с липкой голубой функциональностью меню.До того, как я начал снимать и заменять эту синюю полосу после прокрутки до , исправить ошибку IE7 , не было проблем с расширением / сокращением маленького белого меню.

Есть какие-нибудь идеи о том, что это вызывает?

Answer 1

Первая часть вашего обработчика наведения (с listsMouseIn = true;) фактически никогда не срабатывает, поэтому всякий раз, когда вы нажимаете, ваш обработчик $('body').mouseUp() предполагает, что вы не наводите курсор на списки, и поэтому скрывает меню только для $('#mid-wrap').delegate(...)обработчик, чтобы показать это снова через миллисекунды.

Замена

$('#mid-wrap').delegate('ul#lists', 'hover', funcIn, funcOut);

на

$('#mid-wrap').delegate('ul#lists', 'mouseover', funcIn).
               delegate('ul#lists', 'mouseout', funcOut);

, кажется, добивается цели.

Answer 2

Проблема в том, что событие hover не поддерживает оба аргумента функции (вход и выход) при использовании с .delegate(). Вам нужно будет использовать mouseenter и mouseleave вместо hover.

Изменить на это:

$('#mid-wrap').delegate('#lists', 'mouseenter', function() {
    listsMouseIn = true;
}).delegate('#lists', 'mouseleave', function() {
    listsMouseIn = false;
});

К вашему сведению, если эти объекты HTML являются статическими, а не добавляются динамически, вы можете значительно упростить свой код, используя прямые обработчики событий для этих реальных объектов, а не .delegate и просто stopPropagation () при обработке щелчка. Затем вы сначала увидите клик в объекте и не будете обрабатывать один и тот же клик несколько раз, в результате чего вам понадобятся все эти глобальные флаги для отслеживания состояния.

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