未绘制子菜单(Sidr)

Question

我正在使用Wordpress中的Sidr菜单插件。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()方法可以很好地工作，但不会重新绘制任何内容。菜单将展开以允许显示子菜单，但不显示子菜单(和标题)。根据每个浏览器中的开发人员工具，display根据需要设置为block或none。

我听说Safari可能有问题，不能重新绘制东西(因为它是Webkit，但Chrome也是，所以...)。当然，解决方案是使用hide()和show()来强制重绘。在我的例子中，这显然行不通: hide()和show()是问题所在。我试着不使用jQuery，还试着添加和删除一个样式为不显示的"hideThis“类。唯一略微起作用的是使用hide(2000)，但这只适用于您展开的第一个菜单，并不是每次都起作用。

我已经在两部iPhones和两部安卓手机和一台运行Safari的Windows桌面上进行了测试，所有这些都有完全相同的反应。

您可以在http://test.langcliffeavoca.church上查看此内容

EDIT: Hide()和show()绝对没有区别-我已经尝试了Hide&showing()、this.parent()和this.children()，并且多次尝试这样做，但都没有用。通过调试，我知道事件被正确地触发了。我还知道这些元素实际上是显示和隐藏的，因为我可以在浏览器中关闭并重新打开侧边菜单，一切都会正确显示。它只是没有被重新绘制。这可以在Chrome、Firefox、Edge和Internet Explorer上正常工作，但不能在Safari或原生Android上工作。

Answer 1

我找到的唯一解决办法就是隐藏并显示#sidr-main (整个侧边栏)，延迟10ms。这会引起一次闪光，但并不是很明显。我用this user agent detection code来查看浏览器是safari，还是三星、宏达电、索尼或LG的默认浏览器。这让我可以避免隐藏和显示整个侧边栏，除非确实有必要。我还必须修复代码中的其他一些东西，留给我的是：

    var 
        ua = navigator.userAgent,
        browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrom(e|ium)\W\d|CriOS\W\d/.test(ua) ? 'gc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
        os = /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
        touch = 'ontouchstart' in document.documentElement,
        mobile = /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test
        //window.alert(ua + " ||| " + browser + " ||| " + os);
    var fix = 0;
    if ((ua.indexOf("SamsungBrowser") > -1) || (ua.indexOf("HTC") > -1) || (ua.indexOf("LG-") > -1) || (ua.indexOf("Sony") > -1)) {var fix = 1}
    if (browser == "sa") {var fix = 1}

    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").click(function(event) {
                event.preventDefault();
                event.stopPropagation();
                if (jQuery(this).children().hasClass("fa-angle-right")) {
                    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(10);
                    jQuery(this).parent().parent().children(".sidr-class-menu-item-has-children ul").each(function() {
                        jQuery(this).find("li ul").hide();
                    });
                    if (fix==1) {
                        jQuery("#sidr-main").hide(10);
                        jQuery("#sidr-main").show(10);
                    }
                } else {
                    var id1= jQuery( this ).parent().parent().attr("id");
                    jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide(10);
                    jQuery(this).children().removeClass("fa-angle-down");
                    jQuery(this).children().addClass("fa-angle-right");
                    jQuery("#sidr-main").hide(10);
                    jQuery("#sidr-main").show(10);
                }
            });
        }
    });