如何在搜索按钮时自动展开和收起details菜单？

要实现搜索时自动展开和收起details菜单，我们可以通过控制details元素的open属性来完成，结合搜索逻辑判断何时切换展开/收起状态：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<title>Fruits</title>
<input type="text" id="mySearch" placeholder="Search.." title="Type in a category">
<body>
    <div id="border">
        <div>
            <details id="search" class="finding-section">
                <summary id="summary">Fruits</summary>
                <button class="finding-button" id="apple">Apple</button>
                <button class="finding-button" id="orange">Orange</button>
                <button class="finding-button" id="banana">Banana</button>
            </details>
        </div>
    </div>
</body>
</html>
<script>
  const searchbar = document.getElementById('mySearch');
  const details = document.getElementById('search'); // 获取details元素

  searchbar.addEventListener('keyup', (event) => {
    const searchKey = event.target.value.trim(); // 去除首尾空格，避免空字符触发展开
    const nodes = document.querySelectorAll('.finding-button');
    let hasMatch = false; // 标记是否有匹配的按钮

    nodes.forEach(node => {
      const isMatch = node.textContent.indexOf(searchKey) > -1;
      node.style.display = isMatch ? 'block' : 'none';
      if (isMatch) hasMatch = true; // 只要有一个匹配，就设为true
    });

    // 控制details的展开/收起
    if (searchKey && hasMatch) {
      details.open = true; // 有搜索词且有匹配结果，展开菜单
    } else {
      details.open = false; // 无搜索词或无匹配结果，收起菜单
    }
  });
</script>

关键逻辑说明 #

• 获取details元素：提前获取details元素，避免每次事件触发时重复查询DOM
• 搜索关键词处理：用trim()去除首尾空格，防止用户输入空格误触发展开
• 匹配结果标记：通过hasMatch变量跟踪是否有匹配的按钮
• 动态控制展开状态：
  • 当搜索框有内容且存在匹配按钮时，自动展开details
  • 当搜索框为空或没有匹配结果时，自动收起details

内容的提问来源于stack exchange，提问作者psycrave