Скрыть Div при нажатии

Question

У меня есть небольшое раскрывающееся меню HTML / CSS / JQuery. Мой псевдокод для него:

function closeMenus() {
  $('.subMenu').css('display', 'none');
}

#mainMenu ul li .subMenu {
  display: none;
  position: absolute;
}
#mainMenu ul li:hover .subMenu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
  <ul>
    <li>
      Menu Header
      <div class="subMenu" onClick="closeMenus();">Menu Content</div>
    </li>
  </ul>
</div>

CSS работает, поэтому, когда кто-то наводит курсор на заголовок меню, подменю появляется подменю и исчезает, когда мышь покидает меню. Моя проблема возникает, когда пользователь щелкает элемент в меню; Я хотел бы скрыть меню. JavaScript прекрасно скрывает меню, но когда пользователь снова наводит курсор на заголовок меню, оно не появляется снова. Похоже, что CSS не будет переопределять свойство отображения JavaScript. Большинство, если не все, ссылки не будут переходить на другие страницы, просто вызывая больше JavaScript.

У кого-нибудь есть идеи, как скрыть подменю при щелчке, чтобы оно снова стало видимым, или мне нужно больше Javascript для отображения меню каждый раз, когда кто-то наводит курсор?

Answer 1

Используйте JQuery более полно - посмотрите на команду .toggle () и свяжите ее, нажав:

$('.subMenu').click(function() {$(this).toggle();});

Тогда вы сможете удалить большую часть вашего другого кода.

Answer 2

Вы пытаетесь сделать половину с помощью CSS и половину с помощью jQuery. Просто сделайте все это с помощью jQuery: http://jsfiddle.net/hw5qr/

$('.subMenu').click(function() {
    $(this).hide();
});

$('#mainMenu').hover(function() {
    $(this).find('.subMenu').show();
}, function() {
    $(this).find('.subMenu').hide();
});

Answer 3

Как вы уже сказали, стили элементов сильнее стилей CSS (если вы не используете! Важный). Таким образом, вы должны делать все с Javascript, что не должно быть трудно. Вам просто нужно зарегистрировать еще два прослушивателя событий: onmouseover и onmouseout. С их помощью вы можете установить для свойства display правильное значение, и оно будет работать следующим образом.

Answer 4

Атрибут Stryle имеет самый высокий приоритет.

$('.ftpBrowseSubMenu').css('display','none');

Марка

<div style="display:none">

, поэтому правило

#mainMenu ul li:hover 

имеет более низкий приоритет по сравнению с атрибутом стиля. Итак, вы должны делать все с помощью JavaScript.