Javascript 非画布导航默认打开/关闭

我在一个我正在工作的网站上有一个非画布导航。非画布导航的默认状态是关闭的，这在移动站点上运行良好，因为您可以将其打开并选择链接，但在桌面上，关闭并打开它会对用户隐藏信息，我希望在用户到达页面时默认打开它

当前导航使用jQuery进行切换：

$( "#main-menu-toggle, #main-menu-caption, .menu-mask" ).on( "click", function() {
    // toggle the classes in the body the css does the rest
    $( "body" ).toggleClass( 'main-menu-open' );

    // for screen readers lets set the ARIA atributes
    if ( $( "body" ).hasClass( 'main-menu-open' ) ) {
        $( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
    } else {
        $( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
    }
});

当页面加载并根据屏幕大小调整大小以显示和隐藏菜单时，会在其中调用：

// show or hide the main navigation menu when the page is loaded
showHideMenu();

$( window ).resize(function() {
    waitForDraggingStop(function(){
        showHideMenu();
    }, 500, "window resize in progress");
});

// adds or removes the classes for the menu addition or removal
function showHideMenu() {
    if ( 955 < $( window ).width() ) {
        $( "body" ).addClass( 'main-menu-open' );
        $( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );      
    } else {
        $( "body" ).removeClass( 'main-menu-open' );
        $( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );     
    }
}

问题是菜单有一个与之相关联的动画，因此当您到达桌面时，会有一个延迟，然后菜单会显示动画。这很快就会让用户感到恼火，因为他们必须等待页面完成动画后才能使用屏幕

问题是：

---

有没有更好的方法使用CSS/JS来实现这一点，当用户到达955px以上的页面时，默认情况下菜单会展开，默认情况下会折叠到同一标记以下，并且允许在稍后单击切换时反转方向，并避免与使用JS添加打开类的动画相关的延迟

我最终用我评论中的方法解决了这个问题：

我将jQuery添加的类视为状态切换，而不是像open或closed这样的状态

高于955时，css将默认在没有切换的情况下打开，但其存在会将其关闭；低于955时，不存在会将其关闭，但其存在会将其打开

这将完全删除jQuery在加载时添加类以及resize函数

---

此外，我将body类重命名为main menu open close以反映切换

我在这里有一个想法，如果我把jQuery添加的类当作一个状态切换，而不是一个状态，那么我可能能够重新工具css以获得我想要的。高于955时，css将默认在没有切换的情况下打开，但其存在会将其关闭；低于955时，不存在会将其关闭，但其存在会将其打开。这将完全删除jQuery在加载时添加类以及resize函数。最好将body类重命名为类似于主菜单打开关闭这很容易。。。您应该为此使用媒体查询。。。不是js。所以移动优先。。。使用positioning或translateX…菜单脱离画布。。。。在955px宽处，然后更改定位或translateX。非常简单。@SeanStopnik正确，这就是它的工作原理，但它需要能够通过切换开关打开和关闭，根据屏幕大小，切换开关具有不同的默认状态。955或>为默认打开，切换将其关闭<955默认为关闭，切换将其打开。我最终用上面评论的方法解决了这个问题。