我的父元素没有受到影响

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是正确应用和标签移动从当前位置到左，但股利.window不

Answer 1

波浪符号“~”是不是一个父选择器（see this question and answers）和有当前未在CSS父选择器（see this question and answers。）

您将需要使用一些JavaScript来选择父元素。如果你已经在使用jQuery，jQuery就会变得很简单。

Answer 2

以下CSS将不适用于您，因为~不会影响DOM中的父元素。

.nav-trigger:checked ~ .window { } 

我不添加JavaScript来的事，除非你绝对不能单纯用CSS完成任务。在你的情况下，一个非常小的HTML更改将允许你保持纯CSS的东西。

你必须安排你的HTML，使得您的.nav-trigger复选框，.window是在DOM同一水平。

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> 

CSS改变

使用translate总是会比使用left来移动屏幕上的东西顺畅。使用translate是很好的，因为它强制硬件加速。你的用户界面会更像是一个本地应用程序，它总是你想要的。

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

演示

http://codepen.io/antibland/pen/vGzBRm?editors=1100