Javascript 将详细信息和摘要标记用作可折叠的内联元素

我正在研究解决这个问题的方法：

找到实现可折叠按钮（或其他类似对象）的方法 以致

它们可以在同一行中使用

单击时，它们的内容显示在按钮所在的行和下一行之间

他们反应迅速

独立于标题设置内容的样式

我制作这个gif是为了更好地理解我想要得到的东西

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

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

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

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
边界：无；
背景：无；
大纲：无；
填充：0；
字号：1em；
颜色：绿色；
}
.内容{
最大高度：0；
溢出：隐藏；
背景色：#D3；
}

这行吗？
对
干得好

这个和这个有用吗？
诺伊斯
Ops

像这样的东西对你有用吗

它的工作原理是将细节定位为绝对（您不给它们顶部，因此顶部是没有绝对的位置） 然后将边距底部添加到可折叠的，将负边距顶部添加到细节元素

.container{
位置：相对位置；
边缘：2米；
}
.详情{
显示：无；
}
.可折叠。onactive:活动，
.可折叠.聚焦：聚焦，
.可折叠。ontoggle：聚焦
{
边缘底部：1.5em；
}
.可折叠。ontoggle：聚焦{
指针事件：无；
}
.可折叠.onactive:活动+.详细信息，
.可折叠。onfocus:focus+。详细信息，
.可折叠.ontoggle:焦点+.详细信息
{
显示：块；
边缘顶部：-1.15em；
位置：绝对位置；
左：0；
右：0；
背景：黄色；
}

做
当然可以！
工作干得好工作干得好工作干得好工作干得好工作干得好
聚焦是的！
工作干得好工作干得好工作干得好工作干得好工作好
工作！工作干得好工作
是的！
干得好工作干得好工作干得好工作干得好

这很有趣！但是你必须按住按钮才能显示内容，是否可以一次单击显示内容，然后再单击隐藏内容？我更改了演示以反映不同的方法。（“活动”、“聚焦”和“切换”）非常感谢您的友好回复，您给了我很多帮助。我看到“技巧”是

position:absolute

，由于这一点，可以实现功能2（内容显示在按钮所在的行和下一行之间）。事实上，如果我们将其切换到

位置：static

，则当单击按钮时，按钮被向下移动后的单词。

absolute

的缺点是按钮内容的宽度（在

span details

内）与页面的宽度不相关（它更大），因此您将所有文本放在一个容器中以限制宽度，对吗？关于

ontoggle

案例，我注意到，如果我点击按钮，内容就会显示出来，但是如果我点击页面中的任何地方（或者即使我点击了浏览器之外的某个地方），按钮就会关闭（即内容是隐藏的）。我认为这是由于

focus

类造成的，是否有可能修改为只有在单击按钮时按钮才会关闭？