jquery - hide() 在我的网站上不起作用，但在 jsfiddle 上工作正常

Question

我有一个问题。我复制了与我的页面上完全相同的代码，它在 jsfiddle here 上运行良好。 。当我将其粘贴到 html/css/js 时，此代码不起作用。发生这种情况有什么原因吗？代码有什么问题吗？我确信这很简单，但我就是不明白。非常感谢您提前提供的帮助。顺便说一句:这是一个 source code如果你需要的话。需要等待4秒，因为它会滑落。 X 按钮应该隐藏整个 div，但事实并非如此。这就是问题所在。

代码在这里:

     <div id="wrapper">
        <div id="cookies">
            <p>Leed City Wifi uses cookies. By continuing to browse the site you are agreeing to use our cookies: </p>
            <a href="terms-cookies.html">Find out more</a>
            <a href="#" id="close" > <img src="http://content.captive-portal.com/cookies/_images/close.png"/></a>
        </div>        
</div> 

这里还有 jquery:

$(document).ready(function(){
$('#wrapper').hide();
function delay() {
    $('#wrapper').slideDown(500);
}
setTimeout(delay, 500);
});

$(document).ready(function(){
$('#cookies').hide();
function delay() {
    $('#cookies').slideDown(200);
}
setTimeout(delay, 4000);
});


$("#close").click(function() {
 $("#cookies").slideUp(function() {
     window.location.href = "#";
     });
 });

jsfiddle here 。感谢您提前抽出时间

Answer 1

将您的delay.js 文件更改为此...

$(document).ready(function(){
    $('#wrapper').hide();
    $('#cookies').hide();

    setTimeout(function() {
        $('#wrapper').slideDown(500);
    }, 500);

    setTimeout(function() {
        $('#cookies').slideDown(200);
    }, 4000);

    $("#close").click(function() {
        $("#cookies").slideUp(function() {
            window.location.href = "#";
        });
    });
});

我已将其全部放在一个 document.ready block 中，而不是多个 block 中，将函数直接放入超时调用中，并使用关闭单击处理程序修复了语法错误(您是缺少一些右括号)。

此外，需要在 document.ready 期间分配关闭点击处理程序，而以前则不需要。这就是它在 jsFiddle 上工作的原因，因为它默认使用 onLoad。