javascript - 切换当前元素的可见性

Question

我正在尝试编写一个函数 toggle_active 以在单击时显示隐藏的内容，并在再次单击时再次折叠内容。可悲的是，它不起作用。你能帮我修改一下吗？

function toggle_active(this){
  var x = this.nextSibling;
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  };
}

.daccord_b{
    display:none;
}

<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>

Answer 1

使用方法nextElementSibling 返回下一个元素。并且没有必要使用 if {} 运算符。

不要将 this 用作函数中的参数。

您的任务更正确的方法是方法 toggle()，您的类在 css .daccord_b 中使用它。

function toggle_active(el) {
    var x = el.nextElementSibling;
    x.classList.toggle("daccord_b");
}

.daccord_b {
    display: none;
}

<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>

第二种解决方案使用 style.display。

function toggle_active(el) {
    var x = el.nextElementSibling;
    x.style.display = x.style.display === 'block' ? 'none' : 'block';
}

.daccord_b {
    display: none;
}

<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>