如何从左侧滑动实现单击触发的 div？ [关闭]答案

【问题标题】：How to Implement a click-triggered div with slide from left? [closed]如何从左侧滑动实现单击触发的 div？ [关闭]
【发布时间】：2014-07-17 07:06:52
【问题描述】：

此代码在 jsfiddle 上运行良好，但在浏览器中无法运行，有什么想法吗？

DEMO

<!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>

【问题讨论】：

我没有看到您的脚本中包含 jQuery？你忘了包含 jQuery 吗？

标签： javascript jquery html css animation

【解决方案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>

【讨论】：

如果问题解决了，别忘了接受我的回答（点击绿色复选标记），谢谢。
非常感谢，对不起，我是 javascript 菜鸟。
没关系，我们都必须同时完成一些基础知识。