Логика за скрывающими элементами

Question

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

В Интернете есть множество примеров, когда вы нажимаете на элемент, чтобы отобразить другой элемент. таким случаем может быть меню, которое, когда вы наводите на него мышью (или нажимаете на нее), отображается. Позже элемент будет скрыт либо мышью, либо щелкнув по любому другому элементу ... так как же это достигается? Я уверен, что решение не в том, чтобы связать функцию «hideElem» со всеми элементами.

С уважением,

Answer 1

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

Что касается того, как это делается, методы могут быть разными. Существует множество Javascript-решений, в основном в соответствии с уже изложенными, но меню также можно создавать исключительно с помощью CSS - обычно с использованием свойства display: none; , хотя вы также можете выполнять такие действия, как установка / снятие отрицательного поля, чтобы элемент перемещался «вне страницы».

Чтобы использовать некоторые из моих собственных работ в качестве примера:

• Раскрывающееся меню с Javascript
• Выпадающее меню с jQuery
• Выпадающее меню с CSS

Answer 2

Я давно этого не делал, но простое решение - добавить событие click в верхнюю часть дерева DOM, которое закроет открытый элемент. Вот пример в psuedo-javascript:

document.body.onclick = function() { 
   element.style.display = "none";
}

Если вам нужно сложное поведение внутри «показанного» элемента, убедитесь, что вы предотвращаете распространение необходимых событий вверх по дереву DOM.

element.onclick = function(e) {
  e.stopPropagation()
}

Answer 3

$('#target').bind('click', function(event)
{
    var $element = $('#element');
    $element.show();

    $(document).one('click', function()
    {
       $element.hide();
    });

    // If you don't stop the event, it will bubble up to the document
    // and trigger the click event we just bound. 
    // This will hide the element right now just after showing it, 
    // we don't want that.
    event.stopPropagation();
}

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

Это называется делегированием события.

Answer 4

Дешевый способ сделать это потенциально - привязать обработчик события к событию «(вкл.) Размытия» активируемого элемента и / или его цели. Если ваш дизайн позволяет.

Answer 5

шаг 1 - используйте библиотеку javascript, чтобы код мог быть как можно более кроссбраузерным - в противном случае вам придется обслуживать две разные модели событий между Internet Explorer и браузерами на основе Gecko / WebKit. JQuery, Mootools, YUI - все справятся с этим за вас - их больше, но эти 3 мои любимые и хорошо документированы.

шаг 2 - вы, вероятно, захотите реализовать для этого клик-щит - по сути, элемент dom уровня блока, который абсолютно позиционируется по всей вашей странице с более высоким z-индексом, чем остальная часть страницы. прикрепите к нему событие click, и вы сможете выполнить свою логику для скрытия элементов на странице. В кликшилде легко можно было бы расширить код javascript до высоты вашей страницы после рендеринга DOM, используя методы любой из вышеупомянутых библиотек javascript.

Answer 6

Это один из способов сделать это.

Вы также можете написать метод, который захватывает (подключает) все события «щелчка» независимо от элемента и скрывает оттуда ваше меню.

JQuery облегчит вам эту задачу.