在菜单点击时将 noscroll class 添加到 body

Question

我使用下划线作为 Wordpress 的入门主题，我想在打开菜单按钮时向正文元素添加 'noscroll' class，然后将其删除当菜单关闭时再次。

我试过添加这种东西...

$('body').addClass('noscroll');

...到带有下划线的现有 navigation.js 文件。看起来像这样...

https://github.com/Automattic/_s/blob/master/js/navigation.js

...但我似乎无法找到正确的解决方案。任何帮助都将不胜感激并从中学习！

Answer 1

我不建议更改 navigation.js 文件，因为这是一些不特定于您的站点的预先存在的代码。

您可以尝试将自定义脚本放入主题 functions.php 文件中，如下所示：

function wpse39838169_addNoScroll() { ?>
<script>
$(".MENUBUTTONCLASS").on("click", function(e) {
    $('body').addClass('noscroll');
});
</script>
<?php }
add_action('wp_enqueue_scripts','wpse39838169_addNoScroll');

将 "MENUBUTTONCLASS" 替换为将被单击的按钮的 class。

Answer 2

谢谢斯巴达克斯，你让我走上了正轨。我做了一些测试，发现单击按钮时，以下代码 added/removed 'noscroll' class 到正文...

jQuery(document).ready(function($){
    $(".menu-toggle").click(function () {
      $('body').toggleClass('noscroll');
    });
});

...我以正常方式使用外部 javascript 文件将上述代码放入 Wordpress functions.php 文件中。

在菜单点击时将 noscroll class 添加到 body

Add noscroll class to body on menu click

javascript

wordpress

underscores-wp