Html 选中复选框时取消隐藏div

我正在尝试创建一个响应导航栏，因此当您单击隐藏复选框时，内容将取消隐藏

问题是，我无法让“选中”css实际拾取并执行任何操作

要在此处运行的示例：

CSS:

#nav-hidden{background: red; display: none;}
#navigation-mobile{display:none;}

/* DESKTOP */
@media only screen and (max-width: 1200px) {
        #navigation-mobile {display: block;}
        #menu-toggle:checked ~ #nav-hidden {
            opacity: 1;
            height: 100vh;
            visibility: visible;
        }

        .label-toggle {
            cursor: pointer;
            display: block;
            float: right;
        }
}

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="label-toggle"></label>
    </input>
    <div id="nav-hidden">
        <ul>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

HTML:

#nav-hidden{background: red; display: none;}
#navigation-mobile{display:none;}

/* DESKTOP */
@media only screen and (max-width: 1200px) {
        #navigation-mobile {display: block;}
        #menu-toggle:checked ~ #nav-hidden {
            opacity: 1;
            height: 100vh;
            visibility: visible;
        }

        .label-toggle {
            cursor: pointer;
            display: block;
            float: right;
        }
}

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="label-toggle"></label>
    </input>
    <div id="nav-hidden">
        <ul>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

试验
试验

在您的示例中，在原始状态下：

#导航隐藏{显示：无；}

因此，您需要将其重置为

：checked

状态：

#菜单切换：选中~#导航隐藏{显示：块；}

还要指出的是，您可以设置

高度

、

不透明度

、

可见性

等动画，但无法设置

显示

属性的动画

元素是一个自动关闭标记，您可以执行

或

，但不能执行

#导航隐藏{
显示：无；
}
#菜单切换：选中~#导航隐藏{
显示：块；
}

试验
试验

在您的示例中，在原始状态下：

#导航隐藏{显示：无；}

因此，您需要将其重置为

：checked

状态：

#菜单切换：选中~#导航隐藏{显示：块；}

还要指出的是，您可以设置

高度

、

不透明度

、

可见性

等动画，但无法设置

显示

属性的动画

元素是一个自动关闭标记，您可以执行

或

，但不能执行

#导航隐藏{
显示：无；
}
#菜单切换：选中~#导航隐藏{
显示：块；
}

试验
试验

谢谢这就是问题所在，谢谢：）谢谢这就是问题所在，谢谢：）