我正在网页上显示来自API的一些数据，但是我想在手风琴中显示它们。
我想要一张幻灯片上每个故事的标题，出版日期，图像和摘要，所以基本上每个手风琴幻灯片上都有一个故事。
我该怎么做？JS
let html = [];
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key='*')
.then((resp) => resp.json())
.then(function(data) {
data.results.slice(0, 4).forEach(res => {
html.push(`<h1>${res.title}</h1>`);
html.push(`<p>${res.url}</p>`);
html.push(`<p>${res.abstract}</p>`);
html.push(`<p>${res.published_date}</p>`);
html.push(`<image>${res.multimedia[4]}</image>`);
})
document.getElementById("res").innerHTML = html.join("");
})
HTML
<body>
<h1>Top Stories</h1>
<button class="accordion">Story 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Story 2</button>
<div class="panel">
</div>
<button class="accordion">Story 3</button>
<div class="panel">
<p>hi</p>
</div>
<button class="accordion">Story 4</button>
<div class="panel">
</div>
<div id="res"></div>
</body>
制作手风琴的最简单方法可能是使用HTML <details>标记，如果需要，可以使用CSS使它看起来更好。
<details>这在大多数现代浏览器中都有效，但是Edge和Internet Explorer都不支持。
[如果您想创建自定义手风琴（或需要支持Edge或IE），则互联网上有很多教程，当我在Google上搜索“ js手风琴”时，至少会出现两个主要的网页设计库。] >
如果卡住的部分只是将数据放入页面，请查看<details>
<summary>Summary</summary>
<p>Details</p>
</details>。
阅读完之后，这是一个示例，它产生了与我上面给出的示例相同的示例：
Mozilla's tutorial on DOM manipulationlet accordion = document.querySelector('#accordion'), element = document.createElement('details'), header = document.createElement('summary'), paragraph = document.createElement('p'); paragraph.textContent = 'Details'; header.textContent = 'Summary'; element.appendChild(header); element.appendChild(paragraph); accordion.appendChild(element);