JS手風琴未打開

Question

我有一個網站上有一些JS手風琴，它們沒有打開，但是在codepen上有。 我在chrome上的控制台中查看過，但沒有任何錯誤消息。 但是，當我在Firefox的控制台中查看時，出現7次以下錯誤消息：

不支持“文本/ html”的HTTP“內容類型”。 媒體資源http://xurbia.tk/alpha/homebeta.html的加載失敗。 homebeta.html

所有候選資源加載失敗。 媒體加載已暫停。 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/Stackoverflow.txt

這是我開始制作手風琴的代碼筆： http : //codepen.io/shardros/pen/OyJqzj

這是他們無法使用的網站： http : //xurbia.tk/alpha/homebeta.html

Answer 1

在實際站點上，您的JavaScript是使用模塊模式 ...編寫的。

此模式使用立即調用的函數表達式 （ https://en.wikipedia.org/wiki/Immediately-invoked_function_expression ）。

這意味着該函數一經聲明，便被調用（並執行）。

因為您在頁面的<head>部分中有此腳本，所以它會在DOM加載之前（在實際頁面加載之前）執行。

這意味着您的JavaScript嘗試添加事件偵聽器並處理尚不存在的元素！

為了解決此問題，請將<script>標記移出<head>並將其作為<body>標記內的最后一個元素。

創建所有必要元素后，將具有調用JavaScript的效果。

（您的示例在Codepen中有效，因為它們在DOM加載后執行了JavaScript）

Answer 2

您的問題是頁面加載之前，JS正在執行。 最好在<body>元素的末尾插入JS以提高頁面加載速度。

您還可以使用事件在頁面加載后觸發，如下所示：

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

JS手風琴未打開

問題描述

2 個解決方案

解決方案1
2 已采納 2015-09-22 20:36:15

解決方案2
1 2015-09-22 19:30:42

JS手風琴未打開

問題描述

2 個解決方案

解決方案1 2 已采納 2015-09-22 20:36:15

解決方案2 1 2015-09-22 19:30:42

解決方案1
2 已采納 2015-09-22 20:36:15

解決方案2
1 2015-09-22 19:30:42