Question

我在Ozzu.com上找到了一个符合我需求的功能唯一的问题是我不知道发生什么事100％你能不能告诉我这里发生的事情

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

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

然后在源页面

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

我对if / else实际上做了什么工作感到困惑

由于

Answer 1

您正在通过JavaScript修改ID为“content”的HTML元素的CSS display属性。每次调用toggle函数时，它基本上都会执行以下操作：

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

如果将display属性设置为'none'，则不会呈现ID为“content”的HTML元素。如果将其设置为空字符串（""），它将使用该HTML元素的默认值（在所有情况下都可见）。

Answer 2

将onclick事件添加到节点。因此，当您单击它时，它将调用toggle并且它还将传递参数content。

函数toggle接收一个参数，用作ID。
使用此ID，它将从dom获取elemnt。
将元素保存到e，然后检查样式属性，以查看“display”属性的设置。
如果属性为空字符串（表示未设置），则将其设置为none。同样，如果它已设置为none，则将其设置为空白。（因此再次显示）。

正如旁注，这实际上并不是一种非常好的方法，因为它假设元素的显示设置没有改变。

Answer 3

最好这样做

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>

打开关闭功能？

3 个答案: