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），但这只适用于您展开的第一个菜单，并且不会每次都有效。

我在两部iPhone和两部Android手机以及运行Safari的Windows桌面上进行了测试，所有这些都有完全相同的反应。

您可以在http://test.langcliffeavoca.church

查看此内容

编辑：隐藏（）和show（）肯定没有区别 - 我试图隐藏和显示this（），this.parent（）和this.children（），并尝试多次执行，没有任何帮助。通过调试我知道事件正在被正确触发。我也知道这些元素实际上是显示和隐藏的，因为我可以关闭并重新打开浏览器中的侧边菜单，一切都正确显示。它只是没有被重绘。这适用于Chrome，Firefox，Edge和Internet Explorer，但不适用于Safari或原生Android。

Answer 1

我发现的唯一解决方法实际上是隐藏并显示#sidr-main（整个侧边栏）延迟10毫秒。这会引起闪光，但不是很明显。我已经使用this user agent detection code来发现浏览器是Safari，还是三星，HTC，索尼或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);
                }
            });
        }
    });

子菜单未被绘制（Sidr）

1 个答案: