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');