我在 Wordpress 中使用 Sidr Menu 插件。Sidr 在其移动布局中有几个问题，我使用一些 javascript 修复了这些问题。
<script type="text/javascript">
jQuery( window ).load(function() {
if(jQuery("#sidr-main").length !== 0) {
jQuery(".sidr-class-sub-menu").each(function() {
jQuery(this).hide();
});
jQuery(".sidr-class-menu-item-has-children > a").each(function() {
if(jQuery(this).children().length == 0) {
jQuery(this).append('<span class="sidr-class-menu_arrow"><i class="fa fa-angle-right"></i></span>');
}
});
jQuery( ".fa-angle-down" ).each(function() {
jQuery(this).removeClass("fa-angle-down");
jQuery(this).addClass("fa-angle-right");
});
jQuery(".sidr-class-sub-menu").hide();
jQuery(".sidr-class-menu_arrow").toggle(function() {
var id1 = jQuery(this).parent().parent().attr("id");
jQuery(this).children().removeClass("fa-angle-right");
jQuery(this).children().addClass("fa-angle-down");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
}, function() {
var id1= jQuery( this ).parent().parent().attr("id");
jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
jQuery(this).children().removeClass("fa-angle-down");
jQuery(this).children().addClass("fa-angle-right");
});
}
});
</script>
这段代码隐藏了侧边栏的子菜单，并在开头添加了一个可点击的箭头，然后使用 jQuery 的切换功能来改变箭头的方向并显示或隐藏子菜单。在 Chrome（移动和桌面）和 Firefox 上，这可以完美运行。
在 Safari（移动和桌面）和默认的 android 浏览器上，这不起作用。hide() 和 show() 方法完美运行，但没有重绘。菜单展开以允许显示子菜单，但不显示子菜单（和标题）。根据每个浏览器中的开发人员工具，显示被设置为适当的阻止或无。
我听说 Safari 可能存在不重绘事物的问题（因为它是 Webkit，但 Chrome 也是如此，所以......）。解决方案当然是使用 hide() 和 show() 来强制重绘。就我而言，这显然行不通： hide() 和 show() 是问题所在。我试过不使用 jQuery，还尝试添加和删除一个“hideThis”类，该类的样式设置为不显示。唯一有效的是使用 hide(2000)，但这仅适用于您展开的第一个菜单，并且并非每次都有效。
我已经在两部 iPhone 和两部 Android 手机以及运行 Safari 的 Windows 桌面上对此进行了测试，它们的反应完全相同。
你可以在http://test.langcliffeavoca.church看看这个
编辑：Hide() 和 show() 绝对没有区别 - 我尝试隐藏和显示 this()、this.parent() 和 this.children()，并尝试多次这样做，但没有任何帮助。通过调试，我知道事件被正确触发。我也知道这些元素实际上是被显示和隐藏的，因为我可以在浏览器中关闭并重新打开侧边菜单，并且一切都正确显示。它只是没有被重绘。这适用于 Chrome、Firefox、Edge 和 Internet Explorer，但不适用于 Safari 或原生 Android。