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

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

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

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

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

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

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

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

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

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

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

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

• Выпадающее меню с Javascript
• Выпадающее меню с jQuery
• Выпадающее меню с CSS

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

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

$('#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 перемещается вверх и вниз по всему дереву при запуске. Таким образом, вы можете привязать прослушиватели событий к любому родительскому элементу, если хотите прослушивать событие на многих элементах.

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