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

Question

我正在研究这个问题的解决方案:

find a way to implement collapsible buttons (or other similar objects) such that

1. they can be used in the same line
2. when clicked, their content is showed between the line where the buttons lie and the next line
3. they are responsive
4. style the content independently from the title

我做了这张动图是为了更好地理解我想要得到什么

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

似乎通过使用可折叠对象只能实现第 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 添加到 collapsible 和 negative 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>