javascript - 如何将摘要标签固定到与其关联的扩展详细信息标签的底部？

Question

我希望在单击摘要时将详细信息标签的摘要粘贴到展开的文本底部。我似乎想不出一种方法来实现它，有什么想法吗？我的测试 block 如下:

<article>
The Career Center will host its second “Starting Your Own Business” workshop on Tuesday, February 24, at 10 a.m.  Keli Morris from Northwest Enterprise Facilitation will conduct the workshop.
<details>
<summary style="text-align: right; outline: none;">
Read More
</summary>
<p>
<span style="color: #000000;">
The Career Center will host its second “Starting Your Own Business” workshop on Tuesday, February 24, at 10 a.m.  Keli Morris from Northwest Enterprise Facilitation will conduct the workshop.  Anyone who would like to attend can call 660-582-8980 or email 
</span>
<a href="mailto:noneof@yourbusiness" target="_blank">
emailGoesHere
</a>
<span style="color: #000000;">
 to get their name on the list.  Based upon client feedback, we have changed the day/time for our weekly Job Club workshops at the Career Center.  Starting in February, Job Club will meet Wednesday mornings at 9:30. For more information or to reserve a spot, please call the Career Center.
</span>
</p>
</details>
</article>

我想避免使用 JavaScript，但这是一种后备方案，即丢弃详细信息和摘要标签并使用 onclick 来显示 2 个链接，每个链接都隐藏另一个链接并显示或隐藏文本。我会提供更多，但我不知道如何解释这一点，本质上我希望摘要在单击时向上扩展。

Answer 1

<style>
summary{text-align: right; outline: none;}
details[open] summary{position:absolute;bottom:-10px;right:0%;}
article{position:relative;}
</style>

纯 CSS 修复了这个问题。当然，简单的解决方案。只是进行了大量的尝试和错误!