1

帮助！:)

所以，我一直在尝试用 jquery 添加一个滑入式 cookiebox，它在 jsfiddle 上完美运行，但我不能让它在本地运行，它就像库没有加载一样，它只是显示正确的框离开，按钮不做任何事情。

小提琴：http: //jsfiddle.net/u2zz4/1/

我如何在标题中加载脚本（已检查两个路径是否正常工作）

<script type="text/javascript" src="js/jquery.min2-0.js"></script>
<script type="text/javascript" src="js/cookiebox.js"></script>

使用的 Jquery 库来自https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js （在它后面添加了 2-0 以记住它的版本，测试没有 2-0 和它的作用相同，所以我认为这不是问题）

Cookiebox.js

    var slideWidth = 250;
    var slides = $('#aboutBox').css('width', slideWidth);
    slides.css({
    width: slideWidth,
    height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
    width: 1,
    height: slides.height(),
    overflow: 'hidden',
    display: 'none'
});
$('#show').click(function() {
    if(wrapper.is(':visible'))
        return;
    wrapper.show().animate({
        width: '+=' + slideWidth
    }, 'slow');
});
$('#hide').click(function() {
    wrapper.animate({
        width: 1
    }, 'slow', function() {
        wrapper.hide();
    });
});

HTML（在 body 标签下添加）

<div id="cookiebox">
<a href="# " title=" " id="show">Cookies</a>
<div id="aboutbox">
<p>We have placed cookies on your computer to make sure this website functions properly.</p>
<p>You can change your cookie settings at any time in your browser settings.</p> 
<p>We'll assume you're OK to continue.</p>
<h2><a href="#" title=" " id="hide">OK</a></h2>
</div>
</div>

CSS

#cookiebox {
    margin-top:25px;
    float:left;
}

#aboutBox {
    padding: 0px 15px;
    max-width:200px;
    float:left;
    background: rgba( 200, 200, 200, 0.8);
    border:1px solid rgb(0,0,0);
}
#aboutBox h1{
    margin-bottom: 15px;
}
#aboutBox p {
    margin: 15px 0;
}
#aboutBox h2 {
    padding: 10px 0;    
}

仅供参考，我不知道是谁制作了原始 jquery 代码，但不是我。
我已经环顾了一个半小时以上，没有运气。

PS，如果有人知道如何使底部边框也显示出来，我会很高兴:)

将 ajax 用于另一个项目会是问题吗？
希望有人能看到这个问题并帮助我:)

4

2 回答 2

3

您只需将代码放入 doc.ready 函数中，如下所示：

$(document).ready(function(){
    // your code here
});

这基本上就是你的 jsFiddle 中的 onLoad 选项为你做的事情。

你也可以这样做：

$(window).load(function(){
    // your code here
});

但是 .ready 会更快并且工作正常

于 2013-10-11T16:43:49.043 回答
1

您尝试在 DOM 准备好之前注册事件您应该将代码包装在$(documnet).ready

于 2013-10-11T16:45:16.807 回答