隐藏/显示功能，可在单个页面中多次使用答案

【问题标题】：hide / reveal function which can be used multiple times in a single page隐藏/显示功能，可在单个页面中多次使用
【发布时间】：2019-10-04 15:25:14
【问题描述】：

<div id="my-spoiler">
    <div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
        Spoiler Title
    </div>
    <div class="my-spoiler-content" id="1" style= "display:none">
        Hidden Content
    </div>
</div>

为了在帖子中多次使用它，我需要每次都创建唯一的“id”，例如id=1、id=2....

有没有什么方法可以在没有任何“id”的情况下调用子div并达到结果。

注意：最初“内容”是隐藏的，当用户单击标题时，内容是可见的。

我不想为此使用任何插件。

【问题讨论】：

您可以使用原生 HTML 复选框（隐藏）和 CSS 来执行此操作 - 或者您可以使用 jQuery .closest 定位按钮的父级 - 或者您可以使用常规 JS。不需要身份证。你试过什么了？没有任何代码 - 人们会否决你。
stackoverflow.com/help/how-to-ask + stackoverflow.com/help/mcve
cabrerahector 感谢兄弟修复有问题的代码。

标签： javascript html css wordpress

【解决方案1】：

var faqToggles = document.querySelectorAll('[rel="faq-toggle"]');

faqToggles.forEach( function(toggle) {
  toggle.addEventListener('click', function(event) {
    event.target.closest('.faq').classList.toggle('open');
  });
});

.faq {
  margin-top: 20px;
}

.faq .content {
  border: 1px solid blue;
}

.faq:not(.open) .content {
  padding: 0;
  height: 0;
  overflow: hidden;
  border: 1px solid red;
}

[rel='faq-toggle'] {
  /* this could be a button... maybe should be... */
  cursor: pointer;
}

<section class="faq">

  <header rel="faq-toggle">
    This is the header / teaser etc.
  </header>

  <main class="content">
    This is the full content.
  </main>

</section>

当然 - StackOverflow - 重新排序代码（向后） - 但是像这样？

https://jsfiddle.net/sheriffderek/t32cqmwx/

【讨论】：

【解决方案2】：

其实没必要用javascript，纯粹用CSS就可以了。

“标题”是复选框（隐藏）的标签。单击标签会切换复选框“已选中”属性。
输入放置在您要隐藏/显示的内容之前。
“隐藏”的内容用 css 隐藏。
adjacent sibling combinator 与 :checked 伪选择器结合使用，允许我们设置“隐藏”内容的样式特别是在检查输入时：input:checked + .spoiler-content

.spoiler {
  border: 1px solid #ccc;
}

.spoiler+.spoiler {
  margin-top: 20px;
}

.spoiler input[type="checkbox"] {
  display: none !important;
}

.spoiler-content {
  height: auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .5s;
}

input:checked+.spoiler-content {
  max-height: 1000px;
  opacity: 1;
}

<div class="spoiler">
  <label class="spoiler-title" for="spoiler-1">
        Spoiler Title
    </label>
  <input type="checkbox" id="spoiler-1">
  <div class="spoiler-content">
    Hidden Content
  </div>
</div>
<div class="spoiler">
  <label class="spoiler-title" for="spoiler-2">
        Spoiler Title #2
    </label>
  <input type="checkbox" id="spoiler-2">
  <div class="spoiler-content">
    Hidden Content #2
  </div>
</div>

注意：输入和标签的“id”必须匹配，但是用 php 创建新的“id”并简单地将它们注入到您的标记中是微不足道的：

<?php $spoiler_id = 'spoiler-' . rand(100000,99999999); ?>

由于您尚未与我们共享任何 WordPress / PHP 代码，我们不知道您如何将其添加到您的帖子中，因此我无法更具体地建议如何注入 ID。

【讨论】：