使用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;，并放置一个针对这些菜单项的按钮并切换其显示属性。