我正在尝试在我的WordPress网站的一页上运行一些简单的JavaScript作为测试，但它不会加载。
可以在 http://fiddle.jshell.net/psflannery/XAxWv/中找到代码正常工作的示例。
<div class="acord">
<h3>Summer</h3>
<div class="acorda">
<h3>test1</h3>
<div>test1cont</div>
<h3>test2</h3>
<div>test2cont</div>
<div>
<p>Editorial Intro</p>
</div>
</div>
<h3>Spring</h3>
<div class="acorda">
<h3>test3</h3>
<div>test3cont</div>
<h3>test4</h3>
<div>test4cont</div>
<h3>test5</h3>
<div>test5cont</div>
<div>
<p>Editorial Intro</p>
</div>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
jQuery(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
});
</script>
任何人都可以提供一些关于为什么JavaScript没有加载的建议吗？
作为额外的说明，我确实在加载 Javascript 的情况下成功运行了代码，所以真的不知道问题是什么。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
编辑
由于下面的建议，我已经修改了JavaScript。我现在唯一的问题是我的页面上出现一个错误，说Uncaught TypeError: jQuery(...).accordion is not a function.
我尝试在我的WordPress主题的页面文件和标题.php文件中添加jQuery UI依赖项，但两者都不起作用。
<script src="code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
有人知道如何解决依赖问题吗？
尝试使用：
jQuery(document).ready(function(){
jQuery(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
jQuery(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
});
您可以在主题的functions.php中内联脚本。
这假设您的脚本是enqueue-ed。
如果手风琴jquery扩展库是enqueue-d，$handle为accordion，你可以这样写。
$accordion = <<<HERE
$(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
$(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
HERE;
wp_add_inline_script( 'accordion', $accordion );
在您的网站上，您在脚本中使用 $，而在网站上使用 jQuery 尝试此代码jQuery(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
jQuery(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});