CSS 修复了详细信息摘要旁边的锚点位置

Question

我正在我的 Hugo 网站上工作（repo here）。我想在锚点旁边添加一个详细信息元素，所有样式看起来都相同，如第一个屏幕截图所示（“摘要”是单击时显示摘要的详细信息元素；“纸张”和“幻灯片”是 PDF 的链接).

但是当详细信息元素打开时，这会将锚点推到摘要文本下方，如第二个屏幕截图所示。

当详细信息元素打开时，是否可以将锚点保持在第一个屏幕截图中的位置？

这是页面的标记：

## working papers

1. **A dynamic spatial knowledge economy** (JMP) <br>
    <details>

    <summary>abstract</summary>

    Cities have long been thought to drive economic growth. ...

    </details>
    <a href="/files/p-dske_paper.pdf" class="button">paper</a>
    <a href="/files/p-dske_slides.pdf" class="button">slides</a>

这是我目前正在修改的自定义CSS（将进入

static/css/custom.css

）：

details {
    display: inline-block;
    margin-bottom: 1em;
}
summary {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px;
}
summary:hover {
    background: #FFC72C;
}
details>summary {
    list-style: none;
}
details>summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    display: -webkit-inline-flex;
    position: relative;
    top: 0px;
    right: 0%;
    margin-bottom: 0.5em;
}

.button {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px; /* rounded corners */
}
.button:hover {
    background-color: #FFC72C;
    color: #2774AE;
}

Answer 1

您可以将标签与 onclick 事件一起使用。但你也必须使用一些 JavaScript。

 <button onclick="abstract()">abstract</button>
 <a href="/files/p-dske_paper.pdf" class="button">paper</a>
 <a href="/files/p-dske_slides.pdf" class="button">slides</a>

使用按钮后您可以添加其他链接

在 JavaScript 中，

<script>
    function abstract(){    
        document.getElementById("demo").innerHTML="Cities have long been thought to drive economic growth. ..." ;
    }   
</script>

我希望你能得到你想要的输出。

更多参考这里Onclick事件