切换当前元素的可见性

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

您在这段代码中有一些语法错误。首先，我建议您将函数参数命名为 this 以外的名称，因为 this 是 JavaScript.

中保留的 关键字

其次，我建议在解决此类简单问题之前先咨询 W3School，因为大多数时候，都有一个简单的解决方案:)

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

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>

EDIT 如果您决定将 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 2

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

不要在函数中使用 this 作为参数。

您的任务更正确的方法是方法 toggle()，您的 class 在 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 3

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 4

最好尽可能在处理函数中使用事件对象。请阅读此 post 然后尝试相应地修复您的代码：

更多关于 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>

切换当前元素的可见性

Toggle visibility of the current element

javascript

html

css

onclick

onclicklistener