javascript - 隐藏一个 css 制作的下拉菜单

Question

我用 CSS 创建了一个下拉菜单。这是 HTML 代码:

<li class="menu" id="menu">
  <div class="dropdown">    
    <div class="col1"> ...

这是CSS:

.dropdown {
   visibility:hidden;
   /*...*/
}

#menu li:hover .dropdown{
    visibility:visible;
}

这非常有效。在 jQuery 中，我处理此菜单中链接的单击事件，并且我想在用户单击链接时使用 jQuery 隐藏下拉菜单，以便它消失。 这两个我都试过了(注意:我没有一起使用过它们。):

$('.dropdown').css('visibility', 'hidden'); //didn't work

$('.dropdown').hide(); //didn't work either

他们都隐藏了菜单，但问题是当他们隐藏它时，每当我将鼠标悬停在元素上时我都不会再次获得菜单。

Answer 1

您必须定义当鼠标悬停在按钮上时会发生什么，当鼠标悬停在按钮上时会发生什么。像这样:

jQuery(document).ready(function(){
    jQuery(".dropdown").hover(function() {
        /* hovering actions */
    }, function() {
        /* non-hovering functions */
    });
});