在一个 WordPress 主题上调整浏览器窗口大小时，导航栏不起作用，并且在添加 JS 代码后移动菜单关闭按钮不起作用

Question

我正在尝试 WP 主题，但是当我调整浏览器窗口大小时，移动菜单不起作用，但在刷新浏览器页面后菜单正在工作的同一个小窗口中。

因为我对编码不太了解所以如果有人可以看看并帮助我:)

这是该演示主题的链接： https : //demo.wptravelengine.com/travel-booking/

有人帮我写了这段代码

jQuery(document).ready(function( $ ){
jQuery("#toggle-button").click(function() {
    jQuery(".site-header .right").css("right","0");
})
jQuery(".btn-close-menu").click(function() {
    jQuery(".site-header .right").css("right","-540px");
}) })

但是，当我使用此代码时，在调整 Web 浏览器屏幕大小后打开它时，它没有显示关闭图标按钮和搜索表单持有人。

在此处查看图片： https : //drive.google.com/file/d/1Il3UT1Wehcg0nAyCfW2smVSbdpCwPS0b/view? usp =sharing

除此之外，当我在正常的移动设备中打开网站时，打开菜单后关闭图标不起作用。

Answer 1

查看您编译的 js 代码，我看到它包含在一个条件中，因此除非屏幕小于 1024px，否则点击不会触发。 此检查仅触发 onload，因此在调整浏览器窗口大小时必须刷新（必须加载小于 1024 的窗口）。 您还需要添加一个函数来检查调整大小：

window.addEventListener('resize', (event) => {
// run same 1024 check to allow click after resizing to avoid having to refresh
});