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

【问题标题】：HTML details tag opening direction? How to change?HTML详细信息标签打开方向？如何改变？
【发布时间】：2015-03-13 12:48:50
【问题描述】：

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

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

Here is a simple JSFiddle:

【问题讨论】：

使用 CSS..doubtful 但我认为这将是糟糕的用户体验。我会向下滚动到摘要，单击它，该框可以向上打开并离开屏幕。
@Paulie_D 用户体验超出了我的决定：-(
@Kroltan JavaScript.

标签： javascript html css google-chrome

【解决方案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 来固定箭头方向；）

【讨论】：

迄今为止最好的解决方案！如果需要，我只需要用 JS 计算高度！谢谢！如果没有发布其他解决方案，将标记为正确。

【解决方案2】：

details {background-color:white; color:white;}
details[open] {background-color:red;}
summary {
    background-color:blue; 
    position: relative;
    top: calc(1em + 4px);
}
span {
    position: relative;
    top: calc(-1.2em + 4px);
}

demo

【讨论】：

这是一个很好的解决方案。只是想指出，如果您在span 中有很多内容或换行符，那么它将溢出摘要。换句话说，细节中的span 不可能是动态的。