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中，我处理此菜单中链接的click事件，并且我想使用jQuery在用户单击链接时隐藏下拉列表，以便它消失。我试过这两个（注意：我没有一起使用过这些。）：

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

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

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

Answer 1

好的，实际发生的是当你在元素上设置$('.dropdown').css('visibility', 'hidden');时，它会将它添加到元素的style属性中，内联（你可以使用Firebug来检查）。所以CSS

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

没有任何效果，因为内联样式优先。 .dropdown元素现在将始终设置为hidden。

Answer 2

您必须定义鼠标悬停按钮时会发生什么，以及当鼠标悬停时会发生什么。像这样：

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

Answer 3

这是因为jQuery的hide（）方法在该元素上使用规则“display：none”，在本例中为“。dropdown”，以隐藏它，因此，根据定义，“visibility”不能对元素起作用分配了“display：none”规则。

使用jQuery来制作下拉效果而不是一堆CSS规则。

隐藏css制作的下拉菜单

3 个答案: