html - 彼此内部的“a”标签和“label”标签不起作用

Question

我想只使用 CSS 制作一个可切换的导航。

<header>
    <input type="checkbox" id="nav" value="nav" class="header-toggle hidden-checkbox">
    <label for="nav" class="burger-container">
        <img src="../media/images/burger_menu.svg" alt="burger menu">
    </label>
 <nav>
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="product.html">Products</a>
                <ul>
                    <li><a href="product.html#section1">Section 1</a></li>
                    <li><a href="product.html#section2">Section 2</a></li>
                    <li><a href="product.html#section3">Section 3</a></li>
                </ul>
            </li>
            <li><a href="project.html">Personalise</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>
    </nav>
</header>

这一切都很好，我这样做的方式是当您单击标签内的 SVG 图像时，标签会切换一个输入类型复选框，这样 CSS 就知道何时选中该复选框 在未选中该复选框时显示导航隐藏导航使用

 input:checked {}

我唯一的问题是内部无序列表。正如您在“product.html”页面上看到的那样，当您单击子列表中的任何项目时，您会停留在产品页面上，但向下滚动到某个部分。

当您向下滚动到某个部分时，导航会保持打开状态，因为您在同一页面上并且没有切换复选框。

我试图在“a”标签周围放置一个“标签”，但通过取消选中复选框，只有标签才起作用，但“a”标签没有向下滚动。

比我尝试将“标签”放在“a”标签内但只有“a”标签向下滚动但“标签”没有取消选中复选框。

像这样

  //like this 
   <li><a href="product.html#section2"><label for="nav">S2</label></a> </li>

  //or this
  <li><label for="nav"><a href="product.html#section2">S2</a> </label></li> 

但两者都没有帮助。

注意：另一个标签确实选中/取消选中导航，并且 a 标签只有在结合两者时才会向下滚动它不起作用。

顺便说一句，我也发现了这个问题，但它并没有解决我的问题。<label> 标签内的 <a> 标签未触发复选框

有没有办法在没有javascript的情况下解决这个问题？（向下滚动到部分元素时禁用导航）。

标签： htmlcss