使用细节和摘要标签作为可折叠的内联元素 [英] Use details and summary tags as collapsible inline elements

问题描述

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

<块引用>

找到实现可折叠按钮(或其他类似对象)的方法这样

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

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

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

似乎通过使用可折叠对象只能实现第 2 和第 4 项功能.实际上，由于内容(div 类)必须手动放置在文本中的某个位置(因此在固定位置)，我不知道如何实现响应能力.关于点1.一样，如果两个按钮放在同一行，两个内容放在下一行，第二个按钮会使用它会找到的第一个内容，但第一个按钮和第二个内容不能用过.

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

var coll = document.getElementsByClassName("collapsible");变量 i;for (i = 0; i 

.collapsible {边界:无；背景:无；大纲:无；填充:0；字体大小:1em；颜色:绿色；}.ccontent {最大高度:0；溢出:隐藏；背景颜色:#d3d3d3；}

是否可以<button class="collapsible">this</button>工作?<div class="ccontent">是的！</div>做得好！<小时><button class="collapsible">this</button>和<button class="collapsible">this</button>工作?<div class="ccontent">no</div><div class="ccontent">yes</div>操作

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

使用它们似乎只能实现功能编号 1. 和编号 3.，部分实现编号 4.实际上，例如，细节的背景颜色也会影响摘要之一.此外，在设置 display: inline 时，单击摘要将其周围的文本移动到下一行.

details {显示:内联；红色;填充:0；背景颜色:#d3d3d3；光标:帮助；}详情>概括 {显示:内联；背景:无；颜色:绿色；列表样式:无；/* 删除三角形 */大纲:无；/* 去除蓝色边框 */}详情>summary::-webkit-details-marker {/* 删除三角形 */显示:内联；显示:无；}

是否<details><summary>this</summary>so和so</details>工作?<p>Ops</p><小时><details><summary>this</summary>not</details>和 <details><summary>this</summary>full</details>工作?<p>Ops</p>

回顾:可折叠按钮具有功能 2 和 4，详细信息/摘要标签具有功能 1 和 3(将这两个对象结合起来就可以了！).

是否可以只用一个元素获得所有 4 个特征?

解决方案

这样的事情对你有用吗?

它的工作原理是将细节定位为绝对(你没有给它们顶部，所以顶部是没有绝对的地方)然后将margin-bottom 添加到可折叠元素，将负margin-top 添加到details-element

.container {位置:相对；边距:2em；}.细节 {显示:无；}.collapsible.onactive:活动，.collapsible.onfocus:焦点，.collapsible.ontoggle: 焦点{底边距:1.5em；}.collapsible.ontoggle:焦点{指针事件:无；}.collapsible.onactive:active + .details,.collapsible.onfocus:focus + .details,.collapsible.ontoggle:focus + .details{显示:块；边距顶部:-1.15em；位置:绝对；左:0;右:0;背景:黄色；}

做<button class="collapsible onactive">on active</button><span class=details>是的！</span>工作?干得好！工作?干得好！工作?干得好！工作?干得好！工作?做得好！<button class="collapsible onfocus">on focus</button><span class=details>是的！</span>工作?干得好！工作?干得好！工作?干得好！工作?干得好！工作?好的工作?干得好！工作?<button class="collapsible onggle">toggle</button><span class=details>是的！</span>干得好！工作?干得好！工作?干得好！工作?做得好！

I'm working to study a solution to this problem:

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

I made this gif to better understand what I would like to obtain

Until now I tried with collapsible objects and with details/summary tags.

It seems that by using collapsible objects it is only possible to achieve the features number 2. and number 4. In fact, since the content (div class) has to placed manually somewhere in the text (so in a fixed place), I don't know how it would be possible to achieve the responsiveness. Same about the point 1., if two buttons are placed in the same line and the two contents are placed in the next line, the second button will use the first content that it will find, but the first button and the second content cannot be used.

Here is some code about collapsible objects

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 tags are very easy to implement, but harder to style.

It seems that by using them it is only possible to achieve the feature numbers 1. and number 3., and partially the number 4. In fact, for example, the background color of the details affects also the one of the summary. Moreover, when setting display: inline, performing a click on the summary move the text around it in the next line.

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>

Recap: collapsible buttons have features 2 and 4, details/summary tags have features 1 and 3 (combining the two objects would do the job!).

Is it possible to obtain all 4 features with only one element?

解决方案

Does something like this work for you?

It works by positioning the details absolute (you give them no top, so top is where it would be without absolute) Then adding margin-bottom to the collapsible and negative margin-top to the 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>

这篇关于使用细节和摘要标签作为可折叠的内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！