切换当前元素的可见性

如何解决切换当前元素的可见性

我正在尝试编写一个函数 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>

解决方法

使用方法 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>

,

您在这段代码中遇到了一些语法错误。首先，我建议您将函数参数命名为 reset_index() 以外的其他名称，因为 this 在 JavaScript 中是保留的关键字。

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

这是一个可以解决您所描述问题的链接。

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

而且，这是一个示例以及如何实现此目标：

this

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;
}

编辑如果您决定将 jQuery 引入到您的项目中，即使使用狂热的代码行，您也可以实现它：

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

<div class="my-content" id="content">Hello,some 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="#content">Clicker</button>


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

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

,

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>

,

尽可能在处理函数中使用 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>