jQuery 切换隐藏选择器

Question

我想使用 jQuery toggle() 函数在元素 (#mobileMenu) 被单击，然后当再次单击该元素时，div 再次滑出屏幕。我已经在点击时进行了滑动，但是触发元素随后被隐藏 - display: none 被注入到标签中 - 这使得无法再次点击将 div 滑出。这是相关代码：

$(document).ready(function(){
    $('#mobileMenu').click(function() {
        $("#mobileMenu").toggle(function() {
            $('#mobileNav', this).animate({left: '0' });
        }, function() {
            $("#mobileNav", this).animate({left: '-380px'});
        });
    });
});

#mobileNav 初始设置为 left: -380px.

<div class="mobile-menu-icon">
    <p><a id="mobileMenu" href="#">&#9776;</a></p>
</div>

答案可能使用范围界定，但我似乎无法理解它是如何工作的。

一如既往 - 感谢所有帮助 - 乔

Answer 1

问题是因为 toggle() 方法不再以您期望的方式工作。 'toggle between functions' 签名是 deprecated in 1.8 and removed in 1.9.

相反，您需要自己处理行为的变化。在这种情况下，通过检查元素的当前 left 位置：

$('#mobileMenu').click(function() {
    $(this).toggle(function() {
        var leftPos = parseInt($(this).css('left'), 10) == 0 ? '-380px' : 0;
        $('#mobileNav').animate({ left: leftPos });
    });
});

或者，最好是，您可以在 CSS 中执行动画，然后使用 toggleClass 触发它：

#mobileNav {
    left: 0;
    transition: left 0.5s;
}
#mobileNav.open {
    left: -380px;
}

$('#mobileMenu').click(function() {
    $('#mobileNav').toggleClass('open');
});

最后，请注意，您使用上下文 id 选择器 ($("#mobileNav", this)) 是多余的，因为 id 属性在文档中应该是唯一的，因此上下文选择器没有实际意义。

jQuery 切换隐藏选择器

jQuery toggle hides selector

jquery

jquery-animate