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

Posted 2023-05-09

【中文标题】在一个 WordPress 主题上调整浏览器窗口的大小以及添加 JS 代码移动菜单关闭按钮后，导航栏不起作用

【英文标题】：Navbar is not working when resizing the browser windows on one WordPress theme and after adding the JS code mobile menu close button is not working

【发布时间】：2020-07-06 01:16:24

【问题描述】：

我正在尝试一个 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");
) )

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

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

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

【参考方案1】：

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

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

【讨论】：

我已经添加了它，但是在调整屏幕大小时，关闭按钮和搜索表单持有人没有显示在移动视图中。