如何实现点击网页中「Abstract」字样折叠展开下方文本？

你现有的代码只定义了页面结构，没有绑定点击交互的触发逻辑，所以无法实现折叠展开效果，以下是两种可直接落地的简单实现方案：

方案1：原生HTML5实现（无需写JavaScript，兼容性好） #

HTML5自带的<details>标签天生支持折叠展开交互，只需调整你的代码结构即可：

<ol class="lead">
<li> 
  <p> <b>Free-riding in Collective Agreements,a Search and Matching Model of Minimum Wages</b> 
  <br />  
  <details>
    <summary class="abstract-click">Abstract</summary>
    <p class="abstract-text" style="font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
  </details>
  </p>
</li>
</ol>

如果需要把「Abstract」调整为普通链接的视觉样式，添加以下CSS即可：

.abstract-click {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
  display: inline-block;
  margin: 4px 0;
}

该方案无需额外写交互逻辑，所有主流浏览器均支持，是成本最低的实现方式。

方案2：保留原有结构，用少量JavaScript实现 #

如果你不想改动现有标签结构，添加一段交互逻辑即可：

1. 先给点击元素添加手型 hover 提示的CSS：

.abstract-click {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

2. 在页面底部</body>标签前添加这段原生JS代码：

document.querySelectorAll('.abstract-click').forEach(clickEl => {
  clickEl.addEventListener('click', () => {
    const targetText = clickEl.nextElementSibling;
    targetText.style.display = targetText.style.display === 'none' ? 'block' : 'none';
  })
})

如果你的页面有多个论文摘要，只需给所有Abstract元素统一加class="abstract-click"即可，不要设置重复id，这段代码会自动给所有摘要绑定交互。

内容的提问来源于stack exchange，提问作者Rubén Pérez Sanz