打开关闭功能？

我已经找到了符合我的需求，唯一的问题是发生了什么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

打开关闭功能？

回答

相关问题