求实现点击List Name显示隐藏列表项的HTML代码

方案1：使用原生HTML <details> 和 <summary> 标签（最简单，无需JS） #

这是HTML5原生支持的折叠控件，默认具备点击展开/收起功能，代码量最少：

<details>
  <summary>List Name</summary>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
  </ul>
</details>

• <summary> 作为可点击的标题，点击后自动切换<details>内部内容的显示状态
• 默认状态下列表隐藏，点击标题即可展开
• 无需额外编写CSS或JS，浏览器原生支持基础样式和交互

方案2：HTML+CSS+JavaScript自定义实现（适合需要自定义样式/交互的场景） #

如果需要更灵活的样式控制，可以用JS手动控制列表的显示隐藏：

<style>
  .list-title {
    cursor: pointer; /* 提示用户标题可点击 */
    font-weight: bold;
  }
  .list-items {
    display: none; /* 默认隐藏列表 */
    margin-left: 20px;
  }
</style>

<div class="list-container">
  <div class="list-title" id="toggleTitle">List Name</div>
  <ul class="list-items" id="listItems">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
  </ul>
</div>

<script>
  const title = document.getElementById('toggleTitle');
  const list = document.getElementById('listItems');

  title.addEventListener('click', () => {
    // 切换列表的显示状态
    list.style.display = list.style.display === 'none' ? 'block' : 'none';
  });
</script>

• 通过CSS的display: none设置列表默认隐藏
• 给标题添加点击事件，切换列表的display属性值实现显示/隐藏
• 可通过修改CSS自定义标题和列表的样式，比如颜色、间距、 hover 效果等

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