jQuery change () не распознается css

Я создаю навигацию с помощью canvas с небольшим количеством справки jQuery.

Сама по себе Навигация осуществляется с помощью флажка .menu input[type=checkbox]:checked ~ ul.

В случае изменения флажка я переключаю классы, что хорошо работает. Но теперь я хочу убрать эти изменения и при щелчке элемента навигации, так что навигация автоматически рушится при щелчке. Все работает нормально до сих пор, но когда я запускаю change() при нажатии на навигацию, .menu input[type=checkbox]:checked ~ ul, а не стили по умолчанию. У вас есть идея, почему это так?

ToggleClasses в функции $('#NavButton').change() выполняются при нажатии на ссылку навигации, и 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>

Спасибо!