帮助! :)
所以, 我一直在尝试使用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 lib来自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(在正文标签下添加)
<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用于其他项目?
希望有人能看到问题并帮助我:)
答案 0 :(得分:3)
您只需将代码放在doc.ready函数中,如下所示:
$(document).ready(function(){
// your code here
});
这基本上就是你的jsFiddle中的onLoad选项为你做的。
你也可以这样做:
$(window).load(function(){
// your code here
});
但是.ready会更快,工作正常
答案 1 :(得分:1)
您尝试在DOM准备好之前注册事件
您应该将代码包装在$(documnet).ready