JS 手风琴未打开

Question

我有一个网站，上面有一些 JS 手风琴，它们打不开，但是在 codepen 上可以。我查看了 chrome 上的控制台，没有出现任何错误消息。但是，当我在 Firefox 的控制台中查看时，我收到以下错误消息 7 次：

HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://xurbia.tk/alpha/homebeta.html failed. homebeta.html

All candidate resources failed to load. Media load paused. homebeta.html

我不知道这里发生了什么，所以非常感谢您的帮助。

其中一个手风琴的相关代码如下：

<dt>
  <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
    <img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-left"/>
    Detox
    <img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-right"/></a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
  <img src="http://xurbia.tk/alpha/pictures/accordian%20pictures/Detox.PNG" width="100%" height="100%" />
  <audio controls>
    <source src="" type="audio/wav" width="100%">
      Your browser does not support the audio element.
  </audio>
</dd>

完整代码可以在这里找到： http://xurbia.tk/alpha/Whosebug.txt

这是我开始制作手风琴的代码笔： http://codepen.io/shardros/pen/OyJqzj

以下是他们无法使用的网站： http://xurbia.tk/alpha/homebeta.html

Answer 1

您的问题是您的 JS 在页面加载之前正在执行。最好在 <body> 元素末尾插入 JS 到 improve page load speed.

您还可以使用事件在页面加载后触发，如下所示：

window.onload = function(){
    //Page has loaded
}

Answer 2

在实时站点上，您的 JavaScript 是使用 模块模式 编写的...这很好。

此模式使用立即调用的函数表达式 (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)。

这意味着一旦函数被声明，它就会被调用（并执行）。

因为您在页面的 <head> 部分中有此脚本，所以它会在 DOM 加载之前执行（在实际页面加载之前）。

这意味着您的 JavaScript 试图添加事件侦听器并操作 尚不存在 的元素！

为了解决这个问题，将 <script> 标签移出 <head> 并将其作为最后一个元素放在 <body> 中标签。

这将产生 JavaScript 被调用的效果在所有必需的元素都已创建之后。

（您的示例在 Codepen 中有效，因为它们在 DOM 加载后执行 JavaScript）

JS 手风琴未打开

JS accordions not opening

html

javascript

css

accordion