Html 我的父元素没有受到影响

我正在尝试制作一个滑动汉堡菜单，当选中复选框（图标）时，我无法将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，标签从其当前位置向左移动，但div

.window

不

波浪线“

~

”不是父选择器（），CSS中当前没有父选择器（.）

---

您需要使用一些javascript来选择父元素。如果您已经在使用jQuery，那么jQuery就很容易做到这一点。

以下CSS不适合您，因为

~

不会影响DOM中的父元素

.nav-trigger:checked ~ .window { }

我不会向任何东西添加JavaScript，除非你完全不能用CSS完成任务。在您的情况下，一个非常小的HTML更改将允许您保持事物的纯CSS

您必须安排HTML，使

.nav trigger

复选框和

.window

在DOM中处于同一级别

.nav-trigger:checked ~ .window { }

HTML更改

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"><i class="fa fa-bars"></i></label>

<div class="window">    
  <!-- window contents here -->
</div>

演示

.nav-trigger:checked ~ .window {
    ...
    transform: translateX(200px); /* swapped 'left' for 'transform' */
}
.nav-trigger + label, .window {
    transition: transform 0.2s; /* swapped 'left' for 'transform' */
}