Arhn - архитектура программирования

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

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

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

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

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

Любые идеи о том, что вызывает это?

javascript jquery global-variables
15.01.2012

Ответы:


1

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

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

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

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

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

15.01.2012
  • Спасибо большое. На самом деле моим первоначальным подходом было тестирование видимости объекта, и я столкнулся с той же проблемой. Кроме того, объекты HTML, к сожалению, должны добавляться динамически из-за ошибки IE7. Но это работает — я понятия не имел, что щелчок обрабатывается более одного раза. 16.01.2012

    • 2

    Первая часть вашего обработчика наведения (с 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);

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

    15.01.2012
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..