скрыть меню CSS после нажатия

Question

У меня есть меню вроде:

<ul class="sub">
    <li><a href="#">New</a></li>
    <li><a href="#">Open</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Help</a></li>
</ul>

, который "анимируется" с помощью кода наведения CSS (ничего особенного). Опция Open запускает функцию открытия файла (через скрытый элемент управления «input type = file»). Это все работает нормально, но когда я закончу с диалоговым окном «открытие файла», меню все еще отображается (хотя и кратко). Есть ли способ заставить меню исчезнуть, как только будет нажата кнопка «Открыть», и отобразить это (исчезновение) на экране еще до запуска «диалога открытия»? ТИА

Answer 1

Добавьте прослушиватель событий щелчка для опции «Открыть»:

var openLink = document.getElementById('open'); // replace 'open' with element's ID
openLink.addEventListener('click', clickHandler, false);
function clickHandler() {
  var submenu = document.getElementById('submenu'); // replace 'submenu' with submenu's ID
  submenu.style.display = 'none';
}

Answer 2

То, что вы хотите сделать, это скрыть подменю, когда окно размывается.Не уверен, что вы используете библиотеку JS, но это будет просто, как показано ниже.Вот общий jsfiddle: http://jsfiddle.net/rgthree/b6QSP/

window.onblur = function(){
  // Where "submenu" is the sub menu to hide,
  // however you're targeting it
  submenu.style.display = 'none';
}