Javascript切換（一次一個）

我正在尋找一種簡單的方法，一次只能打開一個div。我使用手風琴垂直導航，當我點擊一個，它顯示下面的div，當我點擊另一個時，它也是一樣的。當我點擊不同的導航鏈接時，我希望先前的div再次隱藏。Javascript切換（一次一個）

這是一個用得到它的打開和關閉的JavaScript IM：

<script type="text/javascript"> 
<!-- 
function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 
//--> 
</script>

有沒有別的東西我可以補充，如果另一個被打開，將關閉該DIV？

來源

2013-05-16 Evan Schmidt

你使用jQuery嗎？如果是這樣，這可能很容易。 –

同意，其實，它不僅會很容易做到這一點，但jQuery UI的都有自己的手風琴：http://jqueryui.com/accordion/ – Duffmaster33

與jQuery你可以'.hide（）'和'.show（）'元素，ALSE您可以輕鬆地在所有div的問題 – Epsil0neR

一個非常簡單的方法是隻跟蹤先前打開的元素：

(function() { // using an IIFE to prevent polluting the global namespace 
    var opened_element = null; 

    window.toggle_visibility = function(id) { 
     var e = document.getElementById(id); 
     if (opened_element && opened_element !== e) { 
      opened_element.style.display = 'none'; 
     } 
     if(e.style.display == 'block') { 
      e.style.display = 'none'; 
     } 
     else { 
      e.style.display = 'block'; 
     } 
     opened_element = e; 
    }; 
}());

來源

2013-05-16 20:28:18

+1。一個圓滑的解決方案，而不是迭代，股利甚至沒有打開或關閉在所有... hm .. –

這不起作用檢查元素可見 –

@Evan：我想我可以跳過測試'opened_element'是否爲'null'，但我不能。修復了代碼，它現在應該可以工作。 –

給他們所有同一班。通過classname隱藏它們，並顯示你通過傳入的id所點擊的那個。

來源

2013-05-16 20:26:56 Jason

最好的辦法是：

使用CSS來隱藏所有的DIV
當你要顯示一個;添加類的所謂「主動」或任何
然後應用CSS來與顯示器類開放DIV：塊或什麼都。

正如賈森在他的評論中說的，你可以用jQuery做到這一點，或者你可以不用。

jQuery將提供動畫支持和類更容易操縱。

jQuery Toggle Class

來源

2013-05-16 20:27:23 Yoda

既然你不使用JQuery，我想你想一個Javascript的回答，您可以通過給你的div一些獨特的類名如「menudiv」，然後在你的函數中添加如下內容：

var menu_divs = document.getElementsByClassName("menudiv"); 
for (var i = 0; i < menu_divs.length; i++) { 
    if (menu_divs[i] != e) 
     menu_divs[i].style.display = 'none'; 
}

來源

2013-05-16 20:31:17 Ford

這聽起來像是一種很好的方法，但是如果我已經有了用類命名的div來切換打開/關閉呢？ –

好吧，我錯了，沒有類名，所以我添加了一個類名作爲menudiv，但是我沒有成功。 –

Javascript切換（一次一個）

回答

相關問題