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

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 到 details-element

.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>