CSS同级选择器未触发

Question

我的CSS中有以下内容（处于调试模式且显示了复选框，但最终将被隐藏）：

<style type="text/css">
* { margin: 0; padding: 0; font-family: sans-serif; }
#nav-trigger { display: none; }
#nav-icon { display: none; }
#navigation { display: block; }
nav     { width: 100%; text-align: center; }
nav ul  { float: right; line-height: 50px; }
nav li  { display: inline; list-style-type: none; }
nav a   { text-decoration: none; padding: 10px; color: #999; }
nav a:hover { color: #C00; }

@media screen and (max-width: 480px) {
nav ul  { display: block; float: none; margin-top: 50px; background-color: #C00; }
nav li  { display: block; }
nav a   { display: block; padding: 3px; border-bottom: 1px dotted #CCC; }
nav a:hover { color: #FFF;}

#nav-trigger { display: block; }
#navigation { display: none; }
#nav-icon { font-size:32px;display:block;position:relative;width:40px;height:40px;text-align:center;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;margin-left:auto;margin-right:8px; }
#nav-icon::before { content:"";position:absolute;top:.25em;left:4px;width:1em;height:.125em;color:#fff;border-top:.375em double #ddd;border-bottom:.125em solid #ddd;box-sizing:content-box }
#nav-trigger:checked ~ #navigation { display: block; }
}
</style>

我的HTML：

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" id="nav-icon"></label>
<nav id="navigation">    
    <ul>
        <li><a href="#">Link 1</a>
        <li><a href="#">Link 2</a>
        <li><a href="#">Link 3</a>
        <li><a href="#">Link 4</a>
    </ul>
</nav>

调整窗口大小时，我的导航是响应式的；当导航像素小于480px时，它会隐藏导航菜单，并显示我的汉堡图标，但是当我单击该图标（或相应的复选框）时，我的菜单没有出现。 我的CSS同级选择器（CSS的最后一行）存在一些关系问题。

试图远离JavaScript / JQuery。

需要一些帮助！

谢谢！

Answer 1

您应该将jQuery用于“检查操作”：

$(document).ready(function() {  
    $('#nav-trigger').change(function() {
       if($(this).is(":checked")){
          $('#navigation').show();
       } else { 
          $('#navigation').hide();
       }
    });
});

了解更多： http : //api.jquery.com/change/

Answer 2

这是编码器错误（睡眠不足）。 在不同的浏览器中重新测试了代码（谢谢Bhojendra和Danield）。