html - 使用 html5 和 css3 的可扩展菜单

Question

我正在设计一个移动网站。在主页上，我有菜单项说'a'，'b'，'c'，...，'h'。我只想显示前三个菜单项并制作一个“查看所有项目”按钮，单击该按钮会展开以显示所有项目。单击后该按钮应变为“显示较少项目”。

我想只使用HTML5 和 CSS3 而不是 JavaScript 来做到这一点。 我也希望这个功能可以在网站上重复使用。

我该怎么做？

- 提前致谢！

Answer 1

现代移动浏览器都支持 JavaScript，但给最终用户（至少在 Android 的情况下，不确定 iOS）一个配置设置来禁用它。

作为开发人员，您最好的选择是使用“故障安全”策略：交付 HTML 时菜单完全展开，并使用 JavaScript 在加载时立即折叠菜单（或在 DOM 就绪时）。这样，如果您的移动用户禁用了 JavaScript，他们将看到整个菜单。您的大多数用户都应该启用 JavaScript，在这种情况下，他们将获得您描述的展开/折叠功能。

Answer 2

期望在没有 JavaScript 的情况下实现这一点是不现实的，如果你能找到一种解决方法，我认为它不会像简单地使用 JavaScript 那样稳定。在隐藏菜单项方面，您可以将它们的 CSS 属性设置为display: none;并放置一个以这些菜单项为目标并切换其显示属性的按钮。