javascript - AJAX 和 jQuery 切换/点击状态(重置状态)

Question

.on 函数和与移动菜单相关的 AJAX 存在一个小问题。菜单位于 AJAX 内容驱动站点的页眉中，因此如果请求 AJAX 调用，页眉和页脚不会被调用，但这会丢弃我的移动菜单切换，因为“状态”正在丢失。

如果我单击一个图标(汉堡包图标)打开菜单，然后单击相同的图标关闭，在加载站点时，它工作正常，但是一旦我单击链接导航到另一个页面，它就会丢失它的状态，我得到了一些奇怪的结果(但公平地说，是真实的结果)，它在一次点击中打开和关闭等等。

我之前使用过 slideToggle() 但我想我会使用一个类，所以我可以删除并添加该类以打开菜单，然后在页面加载完成后在 AJAX 回调中重置该类成功...

$('.menu-trigger').on('click touchstart', function(e) {
    var $this = $(this);
    if ($this.is('.non-active')) {
        $('.menu-trigger').addClass('active').removeClass('non-active');
        $('.menu').addClass('open');    
    } else {
        $('.menu-trigger').removeClass('active').addClass('non-active');                $('.menu').removeClass('open');
    }
});

$(document).on('pjax:end', function() {
    $('.menu-trigger').removeClass('active').addClass('non-active');
    $('.menu').removeClass('open');
});

有没有人有过这方面的经验，也许他们是如何解决的？

Answer 1

试试淡入淡出

   $('.element').fadeToggle('fast');