首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Jquery侧边栏滑出/不在本地工作

问Jquery侧边栏滑出/不在本地工作
EN

Stack Overflow用户
提问于 2013-10-11 16:41:05
回答 2查看 326关注 0票数 1

救命!:)

因此,我一直试图在带有jquery的烹饪盒中添加一个幻灯片,它在jsfiddle上工作得很好,但是我不能让它在本地运行,它的表现就好像库没有加载,它只是立即显示了这个框,而按钮没有做任何事情。

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

如何在头中加载脚本(已经检查了这两条路径是否正常工作)

代码语言:javascript
复制
<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

代码语言:javascript
复制
    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标记下添加)

代码语言:javascript
复制
<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

代码语言:javascript
复制
#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;    
}

FYI,我不知道是谁编写了最初的jquery代码,但不是我。

我已经四处寻找了一个半小时,寻找一个没有运气的修复。

如果有人知道如何让底部边框显示,我会非常高兴的:)

在另一个项目中使用ajax会成为问题吗?

希望有人能看到这个问题并帮我解决:)

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-10-11 16:43:49

只需将代码放入doc.ready函数中,如下所示:

代码语言:javascript
复制
$(document).ready(function(){
    // your code here
});

这基本上就是onLoad选项在您的jsFiddle中为您所做的。

你也可以这样做:

代码语言:javascript
复制
$(window).load(function(){
    // your code here
});

但是.ready会运行得更快更好

票数 3
EN

Stack Overflow用户

发布于 2013-10-11 16:45:16

要在DOM准备好之前注册到事件,就应该将代码包装在$(documnet).ready中

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19323194

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档