直接在 URL 上使用锚链接时无法点击移动菜单

Question

我的主菜单中有一个指向主页上联系表单的锚链接，当您从另一个页面转到那里时，“汉堡包”图标变得无法点击。

我正在为 wordpress 使用“Shapely”主题，我相信它有一个错误。我已经在他们的支持论坛上问过，但没有答案。

如果您访问演示站点并将锚链接添加到移动视图上的 URL 并尝试单击菜单（它不起作用），您可以看到我在说什么。

https://colorlib.com/shapely/#any-id

我需要一个解决方法。我能做什么？

Answer 1

文件中有javascript 错误，名为shapely-scr‌​ipts.js。 javascript 停止执行位于一个文件中的错误后的代码/<script></script> tags。

在您的情况下，保存所有主题 js 功能和修复错误的方法是：

1.第一种方式：

修改.js主题文件。即使在修改之后，如果您更新主题，您将丢失所做的所有更改。以下是您需要更改的内容：

使用file manager/ftp connection 转到{your-website-folder}/wp-content/themes/shapely/assets/js/ 并找到shapely-scr‌​ipts.js 文件。在该文件中找到此代码后

// Smooth scroll
if ( '' !== window.location.hash ) {
  element = $( '#site-navigation #menu a[href=' + window.location.hash + ']' );
  if ( element ) {
    scrollToID = '#' + element.data( 'scroll' );
    $( 'html,body' ).animate( {
      scrollTop: $( scrollToID ).offset().top
    }, 2000 );

    newURL = window.location.href.replace( window.location.hash, '' );
    window.history.replaceState( {}, document.title, newURL );

  }
}

从第 24 行开始，到第 36 行结束，替换为这个：

if ('' !== window.location.hash) {
    element = $('#site-navigation #menu a[href=' + window.location.hash + ']');
    if (element.length > 0) {
        scrollToID = '#' + element.data('scroll');
        $('html,body').animate({
            scrollTop: $(scrollToID).offset().top
        }, 2000);
    }else {
        element = $(window.location.hash);
        if (element.length > 0) {
            $('html,body').animate({
                scrollTop: $(element).offset().top
            }, 2000);
        }
    }

    newURL = window.location.href.replace(window.location.hash, '');
    window.history.replaceState({}, document.title, newURL);
}

在此更改后，您的主题 js 文件将正常运行，不会出现任何错误，这意味着汉堡菜单也将正常运行。

2。第二种方式（如果您使用的是子主题）：

将名为 shapely-scr‌​ipts.js 的文件（选项 1 中提到）复制到您的子主题的某个文件夹中。使用复制的文件shapely-scr‌​ipts.js（在您的子主题中）进行选项 1 中所述的更改。在此之后，您需要阻止加载父主题中的文件，而不是从子主题加载文件。这将始终加载您更改的文件，即使您更新了父主题