WordPress 主题导航栏在调整浏览器屏幕大小时停止工作

Posted 2023-05-09

【中文标题】WordPress 主题导航栏在调整浏览器屏幕大小时停止工作

【英文标题】：WordPress theme navbar stop Working when resizing the browser screen size

【发布时间】：2020-07-10 20:39:34

【问题描述】：

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

由于我对编码知之甚少，所以如果有人可以看看并帮助我:)

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

有人帮我写了这段代码。

window.addEventListener('resize', (event) => 

   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】：

如果上面的代码有效，我添加了一些我的想法。 这将是工作。

window.addEventListener('resize', (event) => 

   jQuery(document).ready(function( $ )
     jQuery("#toggle-button").click(function() 

       jQuery(".site-header .right").addClass("open");
    )
    jQuery(".btn-close-menu").click(function() 
        jQuery(".site-header .right").removeClass("open");
    ) )
);

【讨论】：

它仍然没有显示关闭按钮和搜索表单。请看截图。

你能给我网站的网址吗？我在你的演示站点下修复了它。

嘿，我目前正在 XAMPP 上开发网站。它还没有上线。一切正常，只是搜索表单持有人，并且在调整浏览器大小后没有出现关闭按钮。

@media only screen and (max-width: 1024px) .site-header .right .btn-close-menu z-index: 9999999!important; 请将其添加到 css 文件中