Question

这段代码适用于jsfiddle，但在浏览器中不起作用，任何想法为什么？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(function () {
    $("#clickme").click(function () {
        if ($("#slideout").hasClass("popped")) {
            $("#slideout").animate({
                left: '-280px'
            }, {
                queue: false,
                duration: 500
            }).removeClass("popped");
        } else {
            $("#slideout").animate({
                left: "0px"
            }, {
                queue: false,
                duration: 500
            }).addClass("popped");
        }
    });
});
</script>
<style>
body {
    overflow-x: hidden;
}
#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    top: 45%;
    left: -280px;
    padding-left: 20px;
}
#clickme {
    position: absolute;
    top: 0;
    left: 280px;
    height: 20px;
    width: 20px;
    background: #ff0000;
}
#slidecontent {
    float: left;
}
</style>
<title></title>
</head>
<body>
    <div id="slideout">
        Yar, there be dragonns herre!
    </div>

    <div id="clickme"></div>
</body>
</html>

Answer 1

需要包含jQuery才能使用它。

你可以这样做：

下载jQuery，并从您的计算机上使用
使用jQuery的CDN，并在其网站http://code.jquery.com/

然后，在文件脚本上面加上......就像这样：

<script src="path/or/url/to/jquery.js" type="text/javascript"></script>
<script>
/* Your other stuff */
</script>

如果你正在使用他们网站上的jQuery代码。这是使用1.x

<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
/* Your stuff here */
</script>

如何使用左侧的幻灯片实现点击触发的div？

1 个答案: