设计一个前端组件，实现一个可折叠的菜单，要求具备良好的用户交互体验和可维护性。请描述你的设计思路和关键实现步骤。

答题要点

使用 STAR 法则，S（情景）说明设计此组件的背景，T（任务）明确要实现的功能，A（行动）阐述设计思路和实现步骤，R（结果）说明预期效果。关键要点：1. 结构设计：使用 HTML 构建菜单的基本结构，如 `<ul>` 和 `<li>`。2. 样式设计：用 CSS 实现菜单的样式，包括折叠和展开效果。3. 交互实现：通过 JavaScript 监听事件，控制菜单的折叠和展开。示例话术：在设计可折叠菜单时，首先用 HTML 搭建结构，然后用 CSS 美化样式，最后用 JavaScript 实现交互。当用户点击菜单时，触发相应事件，实现菜单的折叠和展开，提升用户体验。