WP Twenty Seventeen移动端菜单展开后无法滚动显示菜单项求助

你已经精准定位到问题相关代码段，这一步非常关键！移动端点击菜单仅展开却不滚动到菜单项区域，导致5个选项无法完整展示的核心原因，就是当前的点击事件只处理了菜单的展开/收起状态，缺少了滚动至目标区域的逻辑。

下面是针对navigation.js中对应代码的具体修改方案：

修改点击事件处理逻辑 #

在.dropdown-toggle的点击事件函数里，当菜单完成展开（添加toggled-on类）后，加入滚动到对应子菜单区域的代码：

container.find( '.dropdown-toggle' ).click( function( e ) {
    var _this = $( this ),
        screenReaderSpan = _this.find( '.screen-reader-text' ),
        subMenu = _this.next( '.sub-menu' ); // 缓存子菜单元素，提升代码性能

    // 保留原逻辑：阻止默认跳转行为
    e.preventDefault();

    // 保留原逻辑：切换菜单和按钮的展开/收起状态
    _this.toggleClass( 'toggled-on' );
    subMenu.toggleClass( 'toggled-on' );

    // 保留原逻辑：更新屏幕阅读器文本（如果原有代码包含此部分）
    if ( screenReaderSpan.length > 0 ) {
        screenReaderSpan.text( _this.hasClass( 'toggled-on' ) ? screenReaderText.close : screenReaderText.open );
    }

    // 新增：当菜单展开时，滚动到子菜单区域
    if ( subMenu.hasClass( 'toggled-on' ) ) {
        // 方案1：使用你提到的jquery.scrollTo.js插件
        $.scrollTo( subMenu, {
            duration: 300, // 滚动动画时长，可按需调整（单位：毫秒）
            offset: -$( '.site-header' ).height() // 若有固定头部，减去头部高度避免遮挡菜单项
        });

        // 方案2：原生jQuery动画（无需额外插件）
        // $('html, body').animate({
        //     scrollTop: subMenu.offset().top - $( '.site-header' ).height()
        // }, 300);
    }
});

关键注意事项 #

• 固定头部适配：如果页面顶部有固定定位的头部导航，一定要减去头部的高度（比如$( '.site-header' ).height()），否则展开的菜单项会被头部遮挡，用户依旧看不到完整内容。
• 滚动速度调整：duration参数可根据需求修改，数值越小滚动速度越快，300毫秒是比较适中的平滑滚动速度。
• 插件依赖检查：若使用方案1的$.scrollTo()，要确保jquery.scrollTo.js已正确加载到页面中，避免出现引用错误。

额外排查点 #

如果修改后仍无效果，可以检查：

1. 是否有其他JS代码阻止了页面滚动（比如弹窗、固定定位元素的事件监听）
2. 子菜单元素的offset().top值是否正常（可在控制台用console.log(subMenu.offset().top)查看）

内容的提问来源于stack exchange，提问作者Aleks.Andar