【发布时间】：2014-01-08 15:41:13
【问题描述】：
我正在尝试为我的编程信息网页构建一个简单的导航栏。这个问题实际上有点讽刺，因为我无法弄清楚为什么这段代码不起作用。
我正在使用 GoDaddy WebpageBuilder，但是这个特定项目是通过您可以添加的 HTML 元素添加的。如果您以前使用过它，您就会知道我在说什么...
无论如何，手风琴只加载了一半的时间。在某些情况下，它可以很好地加载和运行；而在其他情况下，它会简单地将扩展的手风琴放在页面上，但没有手风琴。
您可以在这里查看：www.shawftware.net
如果问题在第一次尝试时不会出现，请继续刷新直到看到它；手风琴在页面的右上角。
我在 JavaScript 控制台中遇到的错误是：
Uncaught TypeError: Object [object Object] has no method 'accordion'
我不知道这意味着什么或它做了什么，所以我希望这里的人了解如何解决这个错误，以及为什么它只发生了一半。
这是我正在运行的源代码：
HTML：
<div id="accordionBox">
<div id="accordion">
<h3>Navigation</h3>
<div>
<a href="http://www.shawftware.net/home.html"><p class="navButton" style="color: black">Home</p></a>
<hr>
<a href="http://www.shawftware.net/about.html"><p class="navButton">About</p></a>
<hr>
<a href="http://www.shawftware.net/contact.html"><p class="navButton">Contact</p></a>
</div>
</div>
</div>
CSS：
<style>
.gFontHeader{
font-family: 'Montserrat Subrayada', sans-serif;
font-size: 34px;
}
#accordionBox{
width: 150px;
}
.navButton{
text-align: center;
color: #666666;
}
.navButton:hover{
color: black;
}
#accordion a{
text-decoration: none;
}
</style>
JS：
<script>
$(function(){
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});
</script>
【问题讨论】：
-
可以分享一下你完整的网页源代码吗？
-
@watou 正如我在帖子中提到的，我已经在 GoDaddy Website Builder 应用程序中构建了它。遗憾的是，我无法通过它上传自己的 HTML 源代码。如果你想要完整的源代码，它看起来就像一堆乱七八糟的无用材料。手风琴的源代码真的是我唯一能提供的，因为它是我写的唯一材料。
-
值得一试：将
<script> $(document).ready(function(){ $( "#accordion" ).accordion({ collapsible: true, active: false }); }); </script>移动到 html 底部的</body>标记上方。我在想，有时当您的脚本调用时，jquery-ui可能并没有完全加载accordian -
@Trevor 错误仍然存在。它也给出了同样的错误信息。
-
我刚刚在本地测试，手风琴在我的本地 apache 服务器上按预期工作（即使使用 jQuery UI 只是为了一个简单的菜单非常繁重，而它可以简单地使用 slideDown 和 slideUp )。此外，我注意到您加载了 3 次 jQuery 和 2 次 jQuery UI！ jQuery 已经被 require() 加载了，那么下面的标签在你的页面中出现了两次
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
标签： jquery html css load accordion