html - 我的父元素没有受到影响

Question

我正在尝试制作一个滑动汉堡菜单，但当选中复选框(图标)时我无法将 div 移动到左侧。以下内容的 HTML:

<div class="nav">
    <div class="container">
        <img src="{{ asset('assets/images/user.jpg') }}">
        <a href="#">Sameer Manek</a>
    </div>
</div>
<div class="window">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"><i class="fa fa-bars"></i></label>
    {% block main %}{% endblock %}
</div>

和CSS:

.nav-trigger:checked + label {
    left: 215px;
}

.nav-trigger:checked ~ .window {
    background-color: transparent;
    left: 200px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger + label, .window {
    transition: left 0.2s;
}

正确应用第一个和最后一个 CSS，标签从当前位置向左移动，但 div .window 没有

Answer 1

波浪号“~”不是父选择器 (see this question and answers)，目前 CSS 中没有父选择器 (see this question and answers。)

您需要使用一些 javascript 来选择父元素。如果您已经在使用 jQuery，它会让这一切变得简单。