Question

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

目前导航使用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在加载时添加类以及resize函数。

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

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

1 个答案: