Html 如何使弹出窗口可折叠？

我正在做一个学校项目，我们必须为一个酒吧创建一个静态数字菜单。无论如何，我制作了一个按钮，当用户单击它时，会出现一个包含所有项目列表的弹出窗口（我使用的显示：none；property）：

弹出窗口的源代码如下（我将其存储在index.html文件中）：

这没关系，但所有菜单项都有描述，因此菜单的源代码应该如下所示：

<li>
    <label>
           <input type="checkbox" name="">
           <span class="icon"></span>
           <span class="list">Fried Fish With Souce</span>
           <span class="itemDescription">THIS IS A DESCRIPTION!!!</span>
    </label>
</li>

酸辣炸鱼
这是一个描述！！！

---

因此，问题变成了：如何仅在选中某个项目时向每个项目添加描述，而在未选中该特定项目时隐藏描述？应该有某种可折叠的菜单，比如动画/过渡。此外，如何使整个弹出窗口在水平轴上响应（所有元素都应变小），但当出现新的描述时，所有其他项目都应向下移动，因此，弹出窗口应变长。我不知道如何处理这个问题，因此，在正确的方向上提供任何帮助都是非常有用的。提前谢谢

谈到响应性，您应该阅读解释如何在css中创建网格系统的内容。 您还可以学习使用类似的框架

您尝试做的所有其他事情都可以通过几行javascript代码来完成！ 这是菜单中一项的示例：

<!--Put this before your </body> tag-->
<script>
// Add a click event listener to the element the id refers to
document.getElementById("menu-item-id").addEventListener("click", function() {
   // Get descriprion reference
   let description = document.getElementById("menu-item-description");
   // If description is visible hide it
   if (description.style.display !== "none") {
      description.style.display = "none";
   }
   // If description is not visible show it
   else {
      description.style.display = "block";
   }
});
</script>

//将单击事件侦听器添加到id引用的元素
document.getElementById（“菜单项id”）.addEventListener（“单击”，函数）（）{
//获取描述子引用
let description=document.getElementById（“菜单项描述”）；
//如果描述可见，则将其隐藏
如果（description.style.display！=“无”）{
description.style.display=“无”；
}
//如果描述不可见，则显示它
否则{
description.style.display=“块”；
}
});

您可以了解有关addEventListener和getElementById的更多信息

<li>
    <label>
           <input type="checkbox" name="">
           <span class="icon"></span>
           <span class="list">Fried Fish With Souce</span>
           <span class="itemDescription">THIS IS A DESCRIPTION!!!</span>
    </label>
</li>

<!--Put this before your </body> tag-->
<script>
// Add a click event listener to the element the id refers to
document.getElementById("menu-item-id").addEventListener("click", function() {
   // Get descriprion reference
   let description = document.getElementById("menu-item-description");
   // If description is visible hide it
   if (description.style.display !== "none") {
      description.style.display = "none";
   }
   // If description is not visible show it
   else {
      description.style.display = "block";
   }
});
</script>