javascript - 关闭 Canvas 导航默认打开/关闭

Question

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

目前导航使用 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 添加开放类的动画相关的延迟？

Answer 1

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

我将 jQuery 添加的类视为状态切换而不是打开或关闭等状态。

高于 955 时，css 将默认在没有切换的情况下打开，但它的存在会关闭它，低于 955 时，如果没有切换，它会保持关闭，但它的存在会打开它。

这将完全删除在加载时添加类以及调整大小功能的 jQuery。

此外，我将正文类重命名为“main-menu-open-close”以反射(reflect)切换。