$ 不是函数。（在 '$(".accordion")' 中，'$' 未定义）答案

【问题标题】：$ is not a function. (In '$(".accordion")', '$' is undefined)$ 不是函数。（在 '$(".accordion")' 中，'$' 未定义）
【发布时间】：2016-03-07 19:25:31
【问题描述】：

我今天下午根据我发现的一个 codepen 构建了一个小的 jQuery 手风琴，它工作正常，除非我把它放在我需要的 Wordpress 中。我知道这可能很明显，但我现在花了太多时间看它，我觉得我在绕圈子。

这是我使用 ACF 中的一些自定义字段的 wordpress 代码：

<aside class="accordion">
<div>
<span class="col-2 showitem"><?php the_field('show_date'); ?></span>
<span class="col-4 showitem"><?php the_title(); ?></span>
<span class="col-4 showitem"><?php the_field('show_city'); ?></span>
<span class="col-2 showitem">?php the_field('ticket_status'); ?></span>
</div>
<?php the_field('show_information'); ?>
</aside>

还有我在page.php上的脚本：

<script type="text/javascript">
var headers = ["H2"];

$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();

if ($.inArray(name, headers) > -1) {
var subItem = $(target).next();

//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if ($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});

$(allAtDepth).slideUp("fast");

//slideToggle target content
subItem.slideToggle("fast", function() {});
}
});
</script>

我还应该提到我在网站上使用这个Ajax Load More extension，当我从页面中删除与它有关的任何内容并保持简单时，它就可以工作。所以我 99% 确信这与两件事的交互性有关。但是 jQuery 不是我的包，所以我希望比我更聪明的人知道我哪里出错了。

我也有 P 作为 display:none;因为否则它会一直显示。

感谢您查看我的问题！

法学博士:)

ps，原codepen在这里http://codepen.io/rbobrowski/pen/likvA/

更新：我尝试将所有 $ 更改为 jQuery，然后是 jquery。我也尝试了@jai 的两个建议，但都没有成功。我还尝试了@freedomn-m 链接到的解决方案以及搜索结果中多个链接的检查和测试方法，但没有成功。

【问题讨论】：

您需要先在代码中加载默认的jquery。
你包含 jquery..???
尝试包含jquery 插件或使用jQuery 而不是$。最有可能的是，第二种解决方案应该可以工作，即使用 jQuery 而不是 $
查看“$”未定义，检查 wordpress - 哦，看...参考 SO 中的 100 次重复
jquery is not defined wordpress window load的可能重复

标签： javascript php jquery ajax wordpress

【解决方案1】：

在 wordpress 中 $ 符号不可用，您可以将其更改为 jQuery 或将代码放在 IIFE 中，您需要将事件绑定放在 doc 就绪块中：

(function($){ // get it with '$'
   $(function(){ // <---doc ready block
      // put all the code in here

   });
})(jQuery); // <---pass jQuery here

实际上你需要将你的代码放在 doc ready 块中，但是使用 jQuery 作为包装器并在 args 中使用 $：

jQuery(function($){ // use jQuery and pass `$` for a reference to jQuery.
   // code here.
});

【讨论】：

仅供参考，它不需要在 IIFE 中，因为 document.ready 处理程序采用单个参数，即 jQuery 本身：jQuery(function($) { ... });，请参阅“别名 jQuery 命名空间”部分 @987654321 @
使用这个有相同的结果@Jai。 jQuery(function($){ var headers = ["H2"]; etc, etc (run out of characters) subItem.slideToggle("fast", function() {}); } }); });
@Jdizzle 哦，真的，那么你可以使用上面的那个。在大多数情况下都会运行。
检查页面中是否有 jQuery：jQuery.fn.jquery 在浏览器控制台中运行它，看看它是否返回 jQuery 版本。
@Jai 也没有排名靠前的运气。显然运行 jQuery 1.11.3。

【解决方案2】：

您应该将所有$ 替换为jQuery

或

jQuery(function($){ 
     // do all code here
});

【讨论】：

【解决方案3】：

手风琴代码对于我的目的来说太复杂了，我最终将其剥离并解决了 jQuery 问题

jQuery(document).ready(function($) {
my code in here
});

感谢大家的帮助，非常感谢。

【讨论】：