HTML详细信息标签打开方向？如何改变？

Question

我试图找出一种方法来反转<details>HTML 中打开标签的方向，以便将摘要放置在上方而不是默认的下方。

是否可以仅使用 CSS 来实现？CSS+Javascript？

这是一个简单的 JSFiddle：

Answer 1

如果你有一个固定的大小，你可以设置details为position: relative，设置它的大小为关闭和打开状态并使用top和bottom调整其子项：

details { height: 20px; position: relative; width: 100%;}
details[open] { height: 40px;}

details span {position: absolute; top: 0;background-color: red;}
summary {background-color:blue; position: absolute; bottom: 0;}

details[open] ::-webkit-details-marker
{
    transform: rotate(180deg);
}

<body>
    <p>Hello world!</p>
    <details>
                
        <span>Trying to open this upwards</span>
<summary>Test</summary>
        </details>
</body>

并且不要忘记::-webkit-details-marker修复箭头方向;)