使用一個功能切換多個div的可見性：導航欄

我的作業：嗨！我在學校做了一項任務，我在Javascript中編寫代碼，以便在網頁的導航欄中切換每個屬於其自己頂級菜單的子菜單的可見性。應該將可見性設置爲默認隱藏，並應在頂部菜單被點擊時顯示。我知道如何切換屬於topmenu的一個子菜單的可見性，但未能使我的代碼適用於多個元素。我的HTML代碼：使用一個功能切換多個div的可見性：導航欄

 <a class="left_top1" onclick = "toggle()">Opinion</a><br> 
      <div class="left_submenu_1" style="display: none;"> 
      <a class="left_sub1">Leaders</a><br> 
      <a class="left_sub1">Debates</a><br> 
      </div> 
<br> 
      <a class="left_top2" onclick = "toggle()">Economy</a><br> 
      <div class="left_submenu_2" style="display: none;"> 
      <a class="left_sub2">News</a><br> 
      <a class="left_sub2">Your Economy</a><br> 
      </div>

我的問題：我講的topmenus是「意見」和「經濟」。當您點擊頂部菜單「left_top1」時，切換類「left_submenu_1」的div的可見性應該被切換。因此，當您單擊頂級菜單「left_top2」時，切換類「left_submenu_2」的div的可見性應該被切換。這是我做不到的。我的Javascript代碼到目前爲止：

function toggle() { 
    var e = document.querySelectorAll("div.left_submenu_1, div.left_submenu_2"); 
    for (var i=0; i < e.length; i++) { // I know this will enable/disable the visibility for ALL elements selected from the querySelectorAll, which should NOT happen 
    if(e[i].style.display == "none") { 
     e[i].style.display = "block"; 
    } else if(e[i].style.display == "block") { 
     e[i].style.display = "none"; 
    } 
    } 
}

任何人知道如何解決我的這個問題？我知道for循環中有錯誤（正如我在旁邊寫的那樣），但這是我現在可以管理的最好的。

請注意：我們不允許使用jQuery或提供topmenus id：s，因爲想法是使用一個通用函數來切換可見性。此外，啓用切換功能的代碼應該在Javascript中完成。

來源

2016-04-30 Isus

我會通過將div的類名顯示（或隱藏）到函數中來開始處理它。

HTML

<a class="left_top1" onclick = "toggle('.left_submenu_1')">Opinion</a>

然後在功能，你可以抓住的元素，並切換它的顯示狀態。

的JavaScript

function toggle(qs) { 
    var e = document.querySelector(qs); 
    e.style.display = e.style.display === 'block' ? 'none' : 'block'; 
}

如果元件顯示狀態等於塊，返回none，則e.style.display === 'block' ? 'none' : 'block'部分是說，否則返回塊。

由於事先設定了e.style.display =，返回值被設置爲新的元素顯示狀態。

來源

2016-04-30 16:13:15 spaceman

謝謝你的幫助！我認爲你的想法是邏輯和合理的，我覺得我理解它，連同你的解釋。不幸的是，它不工作。現在，topmenu點擊時沒有任何反應。 querySelector是否像一個nodelist（像document.getElementsByClassName和document.querySelectorAll）一樣工作，在「執行」之前必須循環訪問？ – Isus

不，它只返回具有該選擇器的第一個元素，'querySelectorAll'返回具有選擇器的所有元素。這裏是一個工作[jsfiddle]（https://jsfiddle.net/LskxwLur/），希望能讓它更清晰。 – spaceman

好吧，我明白！我認爲這個錯誤代表了我爲什麼在點擊topmenu時沒有發生任何事情。感謝您的進一步解釋！ jsfiddle說得很清楚。現在一切正常，非常感謝你！ – Isus

特林，使其工作在修改儘可能少：
- 在錨標籤使用onClick="toggle(this)"
- 用有點不同的切換功能，如：

function toggle (el) { 
    var e = document.querySelectorAll('.' + el.className.replace('top', 'submenu_'))[0]; 
    e.style.display = e.style.display.match(/none/) ? '' : 'none'; 
}

希望它可以幫助，但我不得不建議你向前邁一小步，並搜索event delegation。再見

來源

2016-04-30 14:21:47 fedeghe

使用一個功能切換多個div的可見性：導航欄

回答

相關問題