Блог

У меня работает небольшое выпадающее меню 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, чтобы показывать меню каждый раз, когда кто-то наводит курсор?

Используйте jQuery более полно — загляните в команду .toggle() и привяжите ее с помощью щелчка:

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

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

You’re trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/

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

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

Stryle attribute has highest priority.

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

make

 <div style="display:none">
  

, so rule

 #mainMenu ul li:hover 
  

has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn’t be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.