css无法识别jQuery change（）

Question

我正在使用一些 jQuery 帮助构建一个画布外导航。

导航本身是通过复选框.menu input[type=checkbox]:checked ~ ul 触发的。

在复选框的更改事件中，我切换类，效果很好。但是现在我想在单击导航项时也触发这些更改，以便导航在单击时自动折叠。到目前为止一切正常，但是当我在导航点击上触发change() 时，仍然应用.menu input[type=checkbox]:checked ~ ul，而不是默认样式。你知道为什么会这样吗？

$('#NavButton').change() 函数中的 toggleClasses 在导航链接单击时执行，css 对此作出反应，只是 .menu input[type=checkbox]:checked ~ ul 仍然应用。

由于触发了 toggleClasses，我假设复选框状态已更改（不幸的是，我在 FireBug 中看不到复选框状态，如果有人知道如何执行此操作，请告诉我！），这就是我难过的原因为什么.menu input[type=checkbox]:checked ~ ul 仍然适用。

这里是代码

CSS：

.menu > ul {
    visibility: visible;
    opacity: 1;
    display: none;
    width: 0;
    height: 100%;
    text-align: left;
    position: fixed;
    top: 0;
    border-color: #111111;
    @include box-shadow (none);
    background-image: none;
    background: #3B3B3B;
    overflow-y: auto;
    transition: width 0.3s ease;
}
.menu input[type=checkbox]:checked ~ ul {
    width: 20%;
    display: block;
    margin-left: -20%;
} 
.wrapper.open {
    left: 20%;    
    overflow: hidden;
    position: relative;
}
body.open {
    overflow: hidden;
}

jQuery:

$('#NavButton').change(function() {
            $('.wrapper').toggleClass('open');
            $('body').toggleClass('open');
            $('#PrimNav a').toggleClass('open');
        });
$('#PrimNav').on('click', '.open', function() {
    console.log('change'); //<- Is working!
    $('#NavButton').change(); //<- Is working!
});

HTML：

<nav class="menu" aria-labelledby="mainnav-desc" role="navigation">
    <input id="NavButton" type="checkbox">
    <label for="NavButton">Menu</label>
    <ul id="PrimNav" class="nav">
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

谢谢！

Answer 1

$('#NavButton').change() 不会取消选中该框。你应该明确地这样做：

$('#NavButton').prop('checked',false);

http://jsfiddle.net/mblase75/kxSqW/