CSS:
ol{display: block;} // display: ""; throws an error in the console(FF)
HTML:
<!DOCTYPE html>
<html>
<head><script type="text/javascript">!js is here!</script>
<body>
<h2>Title</h2>
<input type="button" id="btn" value="expand" />
<ol>
<li>Value 1</li>
<li>Value 1</li>
<li>Value 1</li>
</ol>
</body>
</html>
Javascript://尝试暂时隐藏元素
window.onload = function() {
function expand() {
var ol = document.getElementByTagName('ol');
ol.style.display('none');
}
function init() {
var btn = document.getElementById('btn');
btn.addEventListener('click', expand, false);
}
}
我一直在上下搜索类似的东西，我发现的所有东西都使用了一个额外的库(utility.js、jquery 等)，但出于学习目的，我想用纯 JS 来做。
每个在线来源都引用了 element.className = "newClass";。我通过创建类 .hide{display: none;} 和 .show{display: "";} 来尝试，但它似乎没有做任何事情。然后我切换到操纵样式 (element.style.display("none");)，但这似乎也不起作用。
最佳答案
由于您的 JavaScript 在元素加载到 DOM 之前出现，因此您需要等到窗口加载完毕(或文档准备就绪，此代码段中未显示)，然后再将事件监听器添加到按钮。
window.addEventListener('load', function() {
document.getElementById('btn').addEventListener('click', function(e) {
var style = document.getElementsByTagName('ol')[0].style;
style.display = (style.display == 'none') ? 'block' : 'none';
}, true);
}, true);
要切换显示，您可以使用 display CSS 属性设置为 block 作为 block 元素显示，或 none 不显示完全显示。
关于javascript - 在鼠标单击时使用 javascript 隐藏元素并在第二次单击时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13249849/