的JavaScript不響應的onclick

我想切換導航列表的公開程度與「漢堡」/<img>按鈕。的JavaScript不響應的onclick

<img onclick="dropdownMenu()" class="burger" src="img/icon/menu.png"></img>

我想這個按鈕來火了這個腳本至極被放置在<head>和<script>標籤內。

<script> 
     function dropdownMenu() { 
      document.getElementsByTagName("nav").classList.toggle("show"); 
     } 
</script>

菜單看起來像這樣。

<nav> 
    <ul class="menu"> 
      <li><a href="index.php">Hem</a></li> 
      <li><a href="store.php">Festivaler</a></li> 
      <li><a href="contact.php">Kontakt</a></li> 
    </ul> 
</nav>

我已經與.classList.toggle("show");和.style.display = "none";嘗試和也做了與改變顏色一些簡單的測試。我的語法錯了嗎？還是別的嗎？

來源

2016-01-23 Oscar Andersson

'getElementsByTagName'返回一個節點列表，而不是元素 – adeneo

好吧，謝謝你，我會在該讀了。我應該用什麼來返回一個元素？ –

編輯：我也嘗試使用.getElementByID和.getElementByClassname –

getElementsByTagName返回DOM元素的列表的功能，讓單個一個必須從列表中選擇該項目。也就是說：

function dropdownMenu() { 
    document.getElementsByTagName("nav")[0].classList.toggle("show"); 
}

來源

2016-01-23 10:32:52 Filipe

謝謝先生，但即使使用我的導航，也不會切換其可見性。 –

你可以給我看一些你的CSS代碼，看一看嗎？ – Filipe

'/ * Navigationens stilregler */ .burger { \t位置是：固定; \t top：0px; \t left：0px; \t height：100px; \t寬度：自動; \t光標：指針; } 導航UL { \t列表樣式類型：無; } NAV UL立一個{ \t文字修飾：無; } nav ul li a：hover { \t color：red; }' –

不是使用getElementByTag，而是使用ID來更明確地選擇標籤;通過類或標籤查找將返回一個集合，而通過ID查找將返回一個元素。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

一旦你通過ID的項目有你需要使用的style.display = 「無」;或者包含Jquery，然後你可以使用切換，在這種情況下，你也可以使用Jquery選擇器來查找元素。

來源

2016-01-23 10:34:27

Ahhaaa好吧，聽起來真的很聰明。謝謝。 –

嗯，我得到這個錯誤：TypeError：document.getElementsById不是函數 –

它是document.getElementById not document.getElementsById – smdsgn

我認爲它現在完成了。

<script> 
     function nav(){ 
      document.getElementById("nav").style.visibility="hidden"; 
     } 
    </script> 

<img onclick="nav()" class="burger" src="img/icon/menu.png"></img> 
       <nav id="nav"> 
        <!-- navigationslista --> 
        <ul class="menu"> 
         <li><a href="index.php">Hem</a></li> 
         <li><a href="store.php">Festivaler</a></li> 
         <li><a href="contact.php">Kontakt</a></li> 
        </ul> 
       </nav>

我只是要讓它切換。感謝你們。：d

來源

2016-01-23 11:05:47

下面是切換的解決方案：

<nav id="nav1"> 
     <ul class="menu"> 
      <li><a href="index.php">Hem</a></li> 
      <li><a href="store.php">Festivaler</a></li> 
      <li><a href="contact.php">Kontakt</a></li> 
     </ul> 
</nav> 

<script> 
     function dropdownMenu() { 
      document.getElementById("nav1").classList.toggle("show"); 
     } 
</script> 

<style> 
.show { 
display: none; 
} 
</style>

來源

2016-01-23 11:17:56 mbuhse

請解釋它！ –

我想問題是，CSS中沒有.show類。使用.show類只需使用getElementByID獲取菜單並切換類。 – mbuhse

的JavaScript不響應的onclick

回答

相關問題