Question

CMS问题使我无法使用tabview，所以我一直在寻找获得类似内容组织的替代方案。

我并不真正关心自己的浏览器兼容性，因为这更像是一种个人的，抽象的努力，因为我一直在关注<details>标签。理想情况下，我希望在没有伪类的情况下这样做（我希望能够将其转移到内联CSS以用于其他非常愚蠢的向后 CMS原因）。我一直困惑的扩展努力是使用<details>作为复选框替代出于类似的原因（CMS限制使我无法使用复选框黑客; 相信我，我知道怎么疯了这听起来）。

但在我花费大量时间试图解决这个问题之前，是否有可能重新创造＆＃39;使用<details>和<summary>？

的制表视效果

Answer 1

我认为简单的TL;DR答案（如果我正确地读了你的问题）是'不'。但...

更长的答案是响亮的'是'。 <details>和<summary>是语义元素，因此它们基本上只是具有不同名称的div - 您没有获得额外的功能。但是，如果您给详细信息标记tabindex它将变为可选，然后您可以通过CSS设置显示/隐藏功能的样式。

不确定您希望如何在页面上实现此功能，提供完整的答案很棘手，但作为示例：

在HTML中

<details tabindex="0">
    Heading
    <summary>Interesting factoids...</summary>
</details>

在CSS中......

summary {
    overflow: hidden;
    max-height: 0px;
    height: auto;
}

details:focus summary {
    max-height: unset;
}

默认情况下，这会使摘要的高度为0px，但会在单击其父容器（聚焦）时展开它。

您可能需要针对特定用例详细介绍一下细节，但CSS是可行的方法。

有没有办法使用详细信息标签模仿tabview？

1 个答案: