为什么选中的复选框不适用于不同元素/ div中的元素？ [复制]

Question

我试图在标题和菜单中设置汉堡菜单以从标题下方的内容侧面切换，但我遇到了问题。 我认为由于某种原因，如果 checkboox 与 #sidebarMenu 本身位于不同的 div 中，则选择器 input[type="checkbox"]:checked ~ #sidebarMenu 不想工作。

#sidebarMenu, .sidebarMenu {
    height: 100%;
    width: 250px;
    transform: translateX(-270px);
    transition: transform 250ms ease-in-out;
    background: #fff;
    z-index: 1;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    vertical-align: middle;
    margin-top: 0px;
    box-shadow: 0px 2px 5px 5px rgb(0 0 0 / 16%), 0 0px 10px 1px rgb(0 0 0 / 12%);
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0) !important;
}

这不起作用：

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>

<div id="content" class="site-content container clear">   
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>

这行得通：

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>

Answer 1

在 CSS 中，~ 选择一个 #sidebarMenu，它是 input[type="checkbox"]:checked 的兄弟

当你将包装器放在它周围时它不起作用，因为输入将停止成为#sidebarMenu的兄弟。

编辑：如果您真的想使用第一个代码 sn-p 中的标记，您似乎需要一个 JS 解决方案。

您需要为复选框设置事件侦听器并切换侧边栏菜单的类。从技术上讲，您也不需要输入，但它可能看起来像这样：

document.querySelector('input[type="checkbox"]').addEventListener('click', function() {
    document.getElementById('sidebarMenu').classList.toggle('menu-open')
})