Javascript 侧导航菜单响应类在窗口调整时隐藏

嘿，社区

我有一个关于JS逻辑的小问题，就是在我的body标签中添加一个类名，以便在调整窗口大小时隐藏侧导航菜单。让我尽可能清楚地解释这个问题。目前，我正在使用creativetime提供的名为Argon的UI模板。以全比例宽度加载时，页面如下所示：

加载页面后调整窗口大小时，如下所示：

但是当我刷新页面时，侧边导航不再像应该的那样出现了，如下所示：

刷新页面后，调整窗口的大小会使侧导航按应有的方式隐藏由于某种原因，sidenav不会在第一页加载时隐藏

这方面的JS如下所示：

    var Layout = (function() {

    function pinSidenav() {
        $('.sidenav-toggler').addClass('active');
        $('.sidenav-toggler').data('action', 'sidenav-unpin');
        $('body').removeClass('g-sidenav-hidden').addClass('g-sidenav-show g-sidenav-pinned');
        $('body').append('<div class="backdrop d-xl-none" data-action="sidenav-unpin" data-target='+$('#sidenav-main').data('target')+' />');

        // Store the sidenav state in a cookie session
        Cookies.set('sidenav-state', 'pinned');
    }

    function unpinSidenav() {
        $('.sidenav-toggler').removeClass('active');
        $('.sidenav-toggler').data('action', 'sidenav-pin');
        $('body').removeClass('g-sidenav-pinned').addClass('g-sidenav-hidden');
        $('body').find('.backdrop').remove();

        // Store the sidenav state in a cookie session
        Cookies.set('sidenav-state', 'unpinned');
    }

    // Set sidenav state from cookie

    var $sidenavState = Cookies.get('sidenav-state') ? Cookies.get('sidenav-state') : 'pinned';

    if($(window).width() > 1200) {
        if($sidenavState == 'pinned') {
            pinSidenav()
        }

        if(Cookies.get('sidenav-state') == 'unpinned') {
            unpinSidenav()
        }

        $(window).resize(function() {
            if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
                $('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
            }
        })
    }

    if($(window).width() < 1200){
      $('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
      $('body').removeClass('g-sidenav-show');
      $(window).resize(function() {
          if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
              $('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
          }
      })
    }



    $("body").on("click", "[data-action]", function(e) {

        e.preventDefault();

        var $this = $(this);
        var action = $this.data('action');
        var target = $this.data('target');


        // Manage actions

        switch (action) {
            case 'search-show':
                target = $this.data('target');
                $('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-showing');

                setTimeout(function() {
                    $('body').removeClass('g-navbar-search-showing').addClass('g-navbar-search-show');
                }, 150);

                setTimeout(function() {
                    $('body').addClass('g-navbar-search-shown');
                }, 300)
            break;

            case 'search-close':
                target = $this.data('target');
                $('body').removeClass('g-navbar-search-shown');

                setTimeout(function() {
                    $('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-hiding');
                }, 150);

                setTimeout(function() {
                    $('body').removeClass('g-navbar-search-hiding').addClass('g-navbar-search-hidden');
                }, 300);

                setTimeout(function() {
                    $('body').removeClass('g-navbar-search-hidden');
                }, 500);
            break;
        }
    })


    // Add sidenav modifier classes on mouse events

    $('.sidenav').on('mouseenter', function() {
        if(! $('body').hasClass('g-sidenav-pinned')) {
            $('body').removeClass('g-sidenav-hide').removeClass('g-sidenav-hidden').addClass('g-sidenav-show');
        }
    })

    $('.sidenav').on('mouseleave', function() {
        if(! $('body').hasClass('g-sidenav-pinned')) {
            $('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide');

            setTimeout(function() {
                $('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
            }, 300);
        }
    })


    // Make the body full screen size if it has not enough content inside
    $(window).on('load resize', function() {
        if($('body').height() < 800) {
            $('body').css('min-height', '100vh');
            $('#footer-main').addClass('footer-auto-bottom')
        }
    })

})();

var布局=（函数（）{
函数pinSidenav（）{
$（'.sidenav-toggler'）.addClass（'active'）；
$（'.sidenav-toggler'）。数据（'action'，'sidenav-unpin'）；
$（'body'）.removeClass（'g-sidenav-hidden'）.addClass（'g-sidenav-show g g-sidenav-pinted'）；
$（'body'）。追加（''）；
//将sidenav状态存储在cookie会话中
Cookies.set（'sidenav-state'，'pinted'）；
}
函数unpindenav（）{
$（'.sidenav-toggler'）.removeClass（'active'）；
$（'.sidenav-toggler'）。数据（'action'，'sidenav-pin'）；
$（'body'）.removeClass（'g-sidenav-pinted'）.addClass（'g-sidenav-hidden'）；
$（'body'）.find（'.background'）.remove（）；
//将sidenav状态存储在cookie会话中
Cookies.set（'sidenav-state'，'unpinned'）；
}
//从cookie设置sidenav状态
var$sidenavState=Cookies.get（'sidenav-state'）？Cookies.get（'sidenav-state'）：'pinted'；
如果（$（窗口）.width（）>1200）{
如果（$sidenavState=='pinted'）{
pinSidenav（）
}
if（Cookies.get（'sidenav-state'）=='unpined'）{
unpindenav（）
}
$（窗口）。调整大小（函数（）{
if（$（'body'）.hasClass（'g-sidenav-show'）和&！$（'body'）.hasClass（'g-sidenav-pinted'））{
$（'body'）.removeClass（'g-sidenav-show'）.addClass（'g-sidenav-hidden'）；
}
})
}
如果（$（窗口）.width（）<1200）{
$（'body'）.removeClass（'g-sidenav-hide'）.addClass（'g-sidenav-hide'）；
$（'body'）.removeClass（'g-sidenav-show'）；
$（窗口）。调整大小（函数（）{
if（$（'body'）.hasClass（'g-sidenav-show'）和&！$（'body'）.hasClass（'g-sidenav-pinted'））{
$（'body'）.removeClass（'g-sidenav-show'）.addClass（'g-sidenav-hidden'）；
}
})
}
$（“正文”）。在（“单击”，“数据操作]”上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var action=$this.data（'action'）；
var target=$this.data（'target'）；
//管理行动
开关（动作）{
“搜索秀”案例：
target=$this.data（'target'）；
$（'body'）.removeClass（'g-navbar-search-show'）.addClass（'g-navbar-search-show'）；
setTimeout（函数（）{
$（'body'）.removeClass（'g-navbar-search-show'）.addClass（'g-navbar-search-show'）；
}, 150);
setTimeout（函数（）{
$（'body'）.addClass（'g-navbar-search-show'）；
}, 300)
打破
“搜索结束”案例：
target=$this.data（'target'）；
$（'body'）.removeClass（'g-navbar-search-show'）；
setTimeout（函数（）{
$（'body'）.removeClass（'g-navbar-search-show'）.addClass（'g-navbar-search-hidden'）；
}, 150);
setTimeout（函数（）{
$（'body'）.removeClass（'g-navbar-search-hidden'）.addClass（'g-navbar-search-hidden'）；
}, 300);
setTimeout（函数（）{
$（'body'）.removeClass（'g-navbar-search-hidden'）；
}, 500);
打破
}
})
//在鼠标事件上添加sidenav修改器类
$（'.sidenav'）。on（'mouseenter'，function（）{
if（！$（'body'）.hasClass（'g-sidenav-pinted'））{
$（'body'）.removeClass（'g-sidenav-hide'）.removeClass（'g-sidenav-hide'）.addClass（'g-sidenav-show'）；
}
})
$（'.sidenav'）.on（'mouseleave'，function（）{
if（！$（'body'）.hasClass（'g-sidenav-pinted'））{
$（'body'）.removeClass（'g-sidenav-show'）.addClass（'g-sidenav-hide'）；
setTimeout（函数（）{
$（'body'）.removeClass（'g-sidenav-hide'）.addClass（'g-sidenav-hide'）；
}, 300);
}
})
//如果正文中没有足够的内容，请将其设置为全屏大小
$（窗口）.on（'load resize'，function（））{
如果（$（'body'）.height（）<800）{
$（'body'）.css（'min-height'，'100vh'）；
$（“#footer main”）.addClass（'footer-auto-bottom'）
}
})
})();

---

工作JS FIDLE:

在页面加载

$（窗口）时触发调整大小事件。调整大小（函数（）{………..}）。调整大小（）或在所有代码使用这一行
$（窗口）.resize（）
或
$（窗口）.trigger（'resize'）
Hi Mohamed，我已经做了一个临时解决方案，我还做了一个css媒体查询，在最大宽度为900px时隐藏sidenav，不过这些只是临时解决方案。我正在试图找出这个动画问题的正确解决方案：）在页面加载
$（窗口）时触发resize事件或在所有代码使用这一行
$（窗口）.resize（）
或
$（窗口）.trigger（'resize'）
Hi Mohamed，我已经做了一个临时解决方案，我还做了一个css媒体查询，在最大宽度为900px时隐藏sidenav，不过这些只是临时解决方案。我正试图找出这个动画问题的正确解决方案：）