Question

我正在研究此问题的解决方案：

找到一种实现可折叠按钮（或其他类似对象）的方法   这样


它们可以在同一行中使用

单击时，其内容显示在按钮所在的行与下一行之间

他们反应灵敏

独立于标题设置内容样式

我制作了这个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

Details / summary标签非常易于实现，但样式却很难。

似乎通过使用它们，仅可能获得功能部件编号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

这样对您有用吗？

它通过绝对定位细节来工作（您不给它们上衣，所以上衣就是没有笨拙的地方）比在可折叠的底部增加边距，在明细元素的顶部增加负边距

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

将详细信息和摘要标签用作可折叠的嵌入式元素

1 个答案: