Question

<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”的情况下调用child div并获得结果。

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

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

Answer 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/

Answer 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。

>

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

2 个答案: