将小提琴代码集成到布局中[关闭]答案

【问题标题】：Integrating Fiddle Code Into Layout [closed]将小提琴代码集成到布局中[关闭]
【发布时间】：2014-07-03 03:58:36
【问题描述】：

在名为 Michael 的 Stack Overflow 用户的帮助下，我能够让这个 jsFiddle 部门正确下拉。但是，当我尝试实现 JavaScript、CSS 和 HTML 时，即使是在一个只有 jsFiddle 代码的新目录中，我也无法在点击时让这些部门下拉。实际上，它根本不会显示内容划分。我做错了什么？

我猜我必须以某种方式错误地实现 JavaScript 代码。

jsFiddle 是http://jsfiddle.net/WeL6j/12/，

$(function() {
    $('.action').click(function() {
        var content = $(this).find('~ .content');
        $(this).parent().parent().find('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
});

【问题讨论】：

没有真正看到不起作用的代码，任何人都不太可能简单地猜出你的错误。
您是否包含了 jQuery 库？ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
是的，我想那么多。我将发布一个包含基本文件和包含的简单 pastebin。是的，我包含了它的 jquery 文件。
有什么问题？到目前为止，你已经说过你很难让小提琴工作。但是我打开了你的链接，它似乎对我很有效。
html - pastebin.com/sGzsG7bT css - pastebin.com/dF20LEpP javascript (jquery 1.7.1) - pastebin.com/deQ5MrnV

标签： javascript html css jsfiddle

【解决方案1】：

您需要在使用它之前包含 jQuery ... 确保这一点的好方法是将包含 jQuery before 的 <script> 标记 你的代码。或者您可以将代码移动到正文底部 </body> read more 之前

<head>
<title></title>

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<div id="container"><ul>
    <li>
        <a href="#" class="action">summer</a>
        <div class="content">
            <a href="link">june</a>
            <a href="link">july</a>
        </div>
    </li>
    <li>
        <a href="#" class="action">winter</a>
        <div class="content">
            <a href="link">november</a>
            <a href="link">december</a>
        </div>
    </li>
    <li>
        <a href="#" class="action">weather</a>
        <div class="content">
            <a href="link">rain</a>
            <a href="link">sun</a>
        </div>
    </li>
    </ul></div><br>
<div id="div">
    </div>
<script type="text/javascript">
//$(function() { // ooo looky, i'm not actually needed now!
    $('.action').click(function() {
        var content = $(this).find('~ .content');
        $(this).parent().parent().find('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
//});?
</script>
</body>

【讨论】：

谢谢。我真的应该一大早就远离stackoverflow。我很感激。