在一个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，否则不会触发单击。此检查仅在加载时触发，这就是为什么您在调整浏览器窗口大小时必须刷新(您必须加载小于1024的窗口)。您还需要添加一个函数来检查调整大小：

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