打開關閉功能？

我已經找到了符合我的需求，唯一的問題是發生了什麼100％你可以給我一個運行下來什麼發生在這裏打開關閉功能？

function toggle(id) { 
    var e = document.getElementById(id); 

    if (e.style.display == '') 
    e.style.display = 'none'; 
    else 
    e.style.display = ''; 
}

我不虎視眈眈，然後這正好在上Ozzu.com功能源頁面

<a href="#" onclick="toggle('content')">Toggle</a>

我在困惑什麼的if/else究竟是幹什麼使這項工作

感謝

來源

2011-12-20 Overcranked

https://developer.mozilla.org/en/DOM/element.style – 2011-12-20 22:00:12

您正在通過JavaScript修改ID爲「content」的HTML元素的CSS display屬性，onclick。每次調用toggle功能，它本質上執行以下操作：

if (document.getElementById("content").style.display == '') { 
    document.getElementById("content").style.display = 'none'; 
} else { 
    document.getElementById("content").style.display = ''; 
}

如果你display屬性設置爲'none'，ID爲「內容」的HTML元素不會被渲染。如果將其設置爲空字符串（""），它將使用該HTML元素的默認值（在所有情況下都可見）。

來源

2011-12-20 21:56:36

讓我看看，如果我理解這一行1說，如果內容（div在這種情況下）style.display等於沒有或沒有設置。第2行將style.display設置爲「none」。 ELSE將style.display關閉爲none，如果將顯示上下文ID中的內容？ – Overcranked 2011-12-21 15:04:11

顯示屬性爲空字符串（'「」'）表示div可見。 'if'表示「如果div當前可見，則將其隱藏」。 else等同於「如果div當前不可見，則使其可見。」 – 2011-12-21 16:24:53

謝謝，我想我現在正在抓住它。 – Overcranked 2011-12-21 17:35:11

onclick事件添加到節點。所以當你點擊它時，它會調用toggle，它也會通過參數content。

功能toggle收到一個參數，它被用作ID。
使用這個ID，它會從dom得到elemnt。
將元素保存到e，然後檢查樣式屬性，查看「display」屬性設置爲的內容。
如果該屬性是一個空字符串（意思是未設置），那麼它將其設置爲不顯示任何內容。同樣，如果它已經設置爲不顯示任何內容，則會將其設置爲空白。（因此再次顯示它）。

正如一個側面說明，這其實不是這樣做的一個很好的方法，因爲它假設元素還沒有自己的顯示設置改變。

來源

2011-12-20 21:58:31 Layke

然而更好地做到這一點

function toggle(id) { 
    var e = document.getElementById(id); 
    e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here 
    return false; // cancel the click ! 
} 


<a href="#" onclick="return toggle('content')">Toggle</a>

或不顯眼：

window.onload=function() { 
    document.getElementById('toggleLink').onclick=function() { 
    var e = document.getElementById('content'); 
    e.style.display = (e.style.display == '')?'none':''; // I prefer a ternary here 
    return false; // cancel the click ! 
    } 
} 


<a href="#" id="toggleLink"">Toggle</a>

來源

2011-12-20 22:03:38 mplungjan

你能解釋一下爲什麼這些更好，以及三元組是做什麼的？非常感謝 – Overcranked 2011-12-21 15:06:21

返回false對於阻止頁面嘗試重新加載非常重要。三元組只是你已經做過的簡寫。 – mplungjan 2011-12-21 17:54:26

打開關閉功能？

回答

相關問題