CSS:标签和链接，两者都应该有效

Question

我为单页机创建了一个纯 CSS 导航，演示在这里: http://webentwicklung.ulrichbangert.de/thread36-nav-6.html 到目前为止工作正常，但另外我想在单击链接时隐藏菜单。我尝试通过隐藏菜单的单选按钮的标签将 ul 包装在 nav 中，但没有成功。显然链接捕获了点击事件，它没有到达标签。

单选按钮的 HTML:

    <!-- menu visible when checked -->
    <input type="radio" name="rbnav" id="rbnav1">

    <!-- these should hide the menu -->
    <input type="radio" name="rbnav" id="rbnav2">
    <input type="radio" name="rbnav" id="rbnav3">
    <input type="radio" name="rbnav" id="rbnav4">

导航的 HTML:

    <nav>
        <ul>
            <label for="rbnav4">
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#products">Products</a>
                </li>
                <li>
                    <a href="#aboutus">About Us</a>
                </li>
            </label>
        </ul>
    </nav>

我有这个任务的纯 CSS 解决方案吗？我读了这个线程: Activate Label and Link with one click @Aziz 写道“我认为没有纯 CSS 解决你的问题，你必须使用一些 JavaScript 代码”。任何人都可以确认纯 CSS 绝对不可能，或者另一方面指出解决方案吗？

Answer 1

我不知道您是如何构建代码的，但是，更好的(也许是唯一的)方法是使用 JavaScript。 如果您使用 CSS 类来打开和关闭导航，您应该创建一个函数来更改它的类。

你能展示更多关于你的代码的信息吗？您是否正在使用其他 JavaScript 函数？