如何通过JavaScript编程关闭HTML Details组件的展开内容

嘿，我完全懂你的需求——你想在点击那个TOP按钮回到页面顶部的时候，顺便把所有已经展开的Details组件都收起来，对吧？其实这个操作超简单，咱们直接利用HTML Details元素自带的特性就能搞定。

核心原理 #

HTML的<details>元素有一个**open布尔属性**：当这个属性存在时，组件处于展开状态；只要把它的open属性设置为false（或者直接移除这个属性），就能让组件立刻收起。

修改你的代码 #

你只需要在现有的toTop函数里，添加一段遍历并关闭所有Details的代码就行。下面是修改后的完整代码：

const buttons = document.querySelectorAll('.toTop'); 

function toTop() {
  // 重置所有卡片的背景色为aliceblue
  var elements = document.getElementsByClassName('card'); 
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = 'aliceblue';
  }

  // 新增：关闭所有展开的details组件
  const allDetails = document.querySelectorAll('details');
  allDetails.forEach(detail => {
    detail.open = false;
  });

  // 跳转到页面顶部
  window.location.assign("#top"); 
}

buttons.forEach((button) => {
  button.addEventListener('click', toTop);
});

代码解释 #

• document.querySelectorAll('details')：选中页面上所有的<details>元素；
• 遍历每个选中的元素，把detail.open设为false：这会直接触发Details组件的收起动作，和用户点击Summary关闭的效果完全一致。

这样一来，当你点击TOP按钮时，不仅卡片背景会变回蓝色、页面会滚动到顶部，所有展开的Details也会自动收起来啦～

内容来源于stack exchange