使用详细信息和摘要标签作为可折叠内联元素

Question

我正在努力研究这个问题的解决方案：

找到一种方法来实现可折叠按钮（或其他类似对象），以便

1. 它们可以在同一行中使用
2. 单击时，其内容显示在按钮所在行和下一行之间
3. 他们反应敏捷
4. 内容的样式独立于标题

我制作这个 gif 是为了更好地了解我想要获得什么

到目前为止，我尝试使用可折叠对象和详细信息/摘要标签。

似乎通过使用可折叠对象只能实现第 2 号和第 4 号功能。事实上，由于内容（div 类）必须手动放置在文本中的某个位置（因此在固定位置），所以我不这样做不知道如何才能实现响应能力。与第 1 点相同，如果两个按钮放置在同一行，并且两个内容放置在下一行，则第二个按钮将使用它找到的第一个内容，但第一个按钮和第二个内容不能同时使用。用过的。

这是一些关于可折叠对象的代码

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.collapsible {
  border: none;
  background: none;
  outline:none;
  padding: 0;
  font-size: 1em;
  color: green;
    }

.ccontent {
  max-height: 0;					
  overflow: hidden;
  background-color: #d3d3d3;
    }

Does <button class="collapsible">this</button> work?
<div class="ccontent">Yes!</div>
Good job!
<hr>
Does <button class="collapsible">this</button> and <button class="collapsible">this</button> work?
<div class="ccontent">no</div><div class="ccontent">yes</div>
Ops

详细信息/摘要标签很容易实现，但很难设计样式。

看起来，通过使用它们，只能实现第 1 号和第 3 号特征，以及部分第 4 号特征。事实上，例如，细节的背景颜色也会影响摘要的特征。此外，设置 时display: inline，单击摘要会在下一行中移动摘要周围的文本。

details {
  display: inline;
  color: red;
  padding: 0;
  background-color: #d3d3d3;
  cursor: help;
  
}
details > summary {
  display: inline;
  background: none;
  color: green;
  list-style: none; /* to remove triangle */
  outline:none; /* to remove blue border */
}
details > summary::-webkit-details-marker { /* to remove triangle */
  display: inline;
  display: none;
}

Does <details><summary>this</summary>so and so</details> work?
<p>Ops</p>
<hr>
Does <details><summary>this</summary>not</details> and <details><summary>this</summary>fully</details> work?
<p>Ops</p>

回顾一下：可折叠按钮具有功能 2 和 4，详细信息/摘要标签具有功能 1 和 3（组合两个对象即可完成这项工作！）。

是否可以仅用一个元素获得全部 4 个特征？

Answer 1

这样的事情对你有用吗？

它的工作原理是绝对定位细节（你没有给它们顶部，所以顶部是没有绝对的位置）然后将 margin-bottom 添加到可折叠的元素，并将负 margin-top 添加到细节元素

.container {
  position:relative;
  margin:2em;
}
.details {
  display:none;
}
.collapsible.onactive:active,
.collapsible.onfocus:focus,
.collapsible.ontoggle:focus
{
  margin-bottom:1.5em;
}
.collapsible.ontoggle:focus {
    pointer-events:none;
}

.collapsible.onactive:active + .details, 
.collapsible.onfocus:focus + .details, 
.collapsible.ontoggle:focus + .details 
{
  display:block;
  margin-top:-1.15em;
  position:absolute;
  left:0;
  right:0;
  background:yellow;
}

<div class=container>

    Does 
    <button class="collapsible onactive">on active</button><span class=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good job!
    <button class="collapsible onfocus">on focus</button><span class=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good 
    job!work? Good job!work? 
    <button class="collapsible ontoggle">toggle</button><span class=details>Yes!</span>
    Good job!work? Good job!work? Good job!work? Good job!

</div>