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/

jQuery change（）无法被css识别

1 个答案: