切换当前元素的可见性

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>

Answer 2

js:

function toggle_active(id){
      var x = document.getElementById(id);
      if (x.style.display === "none" || x.style.display === "") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      };
    }

html:

    <header class="ca_h" onclick="toggle_active('HiddenContent');">
   toggle
</header>
<div class="had daccord_b" id='HiddenContent'>Hidden content</div>

Answer 3

此代码中有一些语法错误。首先，我建议您将函数参数命名为 this 以外的名称，因为 this 是 JavaScript 中的保留 关键字。

其次，我建议在联系 W3School 之前咨询这些简单的问题，因为大多数情况下，有一个简单的解决方案:)

这里有一个链接可以完全解决您所描述的问题。

https://www.w3schools.com/howto/howto_js_collapsible.asp

还有，这是一个示例以及如何实现这一点：

let content = document.getElementById("content");

function handleClick() {
  if (content.classList.contains("hide")) {
     content.classList.remove("hide");
  } else {
     content.classList.add("hide");
  }
}

.my-content {
  display: block;
}

.my-content.hide {
  display: none;
}

<button onclick="handleClick()">Toggle</button>

<div class="my-content" id="content">Hello, some content</div>

编辑如果你决定在你的项目中引入 jQuery，你甚至可以用几行代码来实现它：

$("[data-collapse]").on('click', function () {
   let target = $(this).data('collapse');
   $(target).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-collapse="#content">Clicker</button>


<div id="content">
My Content
</div>

这使得它抽象和可重复使用，甚至允许你做一些单独的容器之类的事情：

$("[data-collapse]").on('click', function () {
   let target = $(this).data('collapse');
   $(target).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button data-collapse="#target1">Collapse #1</button>
<button data-collapse="#target2">Collapse #2</button>


<div id="target1">
  <h1>I'm Target #1</h1>
</div>

<div id="target2">
  <h1>I'm target #2</h1>
</div>

Answer 4

如果可以，最好在处理函数中使用 Event 对象。请阅读这篇文章，然后尝试相应地修复您的代码：What exactly is the parameter e (event) and why pass it to JavaScript functions?

更多关于Event.currentTarget的信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

function toggle_active(evt){
  var x = evt.currentTarget.nextElementSibling;
  x.classList.toggle('daccord_b'); 
}

.daccord_b {
    display: none;
}

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