jquery - jsfiddle只工作一次

Question

这是我的jsfiddle的链接。我有一个悬停效果的下拉导航栏。此效果仅在我运行项目时有效。之后，直到我再次运行它才有效。它与“框架和扩展”选项有什么关系吗？我在这里读了一些关于它的内容，但还没有清楚地理解它们之间的区别。这是我的js代码

function mainmenu(){
$("#bav .inner ul ul").css({display: "none"}); // Opera Fix
$("#bav .inner ul li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display:"none"}).slideDown(400, 'backout');
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
}
$(document).ready(function() {
                       mainmenu();
        });

我正在选择 onLoad“选项”。谁能告诉我为什么在运行代码后只看到一次效果？

Answer 1

不知道你为什么要使用退出，slideDown()但这是破坏代码..

$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); //<---removed backout here

工作小提琴

Answer 2

不要改变visibility和display。只需使用hide()和show()。你的slideDown论点是无效的。见http://jsfiddle.net/UyqFc/19/

$("#bav .inner ul ul").hide(); // Opera Fix
$("#bav .inner ul li").hover(function () {
    $(this).find('ul:first').slideDown();
}, function () {
    $(this).find('ul:first').hide();
});