为什么我的下拉菜单不起作用？

Question

我正在尝试将可见性从隐藏更改为可见，因此请检查我的jquery并告诉我出了什么问题。如果需要更多，请告诉我。

$(document).ready(function(){
    $("#navLink1").hover(function(){
        $("#dropDown1").css("visibility", "visible");
    });
});

Answer 1

您需要使用.show()，无法覆盖display:none（，如果您使用它隐藏元素）visibility:visible

$("#dropDown1").show();

Answer 2

尝试使用.toggle()：

$("#navLink1").hover(function(){
    $("#dropDown1").toggle();
});

它会切换display属性，而不是在CSS中使用visibility: hidden;使用display: none;。

或者你可以使用：

$("#navLink1").hover(function(){
    $("#dropDown1").css("visibility", "visible");
}, function(){
    $("#dropDown1").css("visibility", "hidden");
});

这里有效：http://jsfiddle.net/gTuxP/

Answer 3

使用slideToggle()获得滑动效果。

$(document).ready(function(){
    $("#navLink1").hover(function(){
        $("#dropDown1").slideToggle();
    });
});