I'm using the Sidr Menu plugin in Wordpress. Sidr has a couple issues in its mobile layout, which I fixed using a bit of 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>
This code hides the submenus on the sidebar and adds a clickable arrow to begin with, and then uses jQuery's toggle function to change the arrow's direction and show or hide the submenu. On Chrome (mobile and desktop) and Firefox, this works perfectly.
On Safari (mobile and desktop) and on the default android browser, this doesn't work. The hide() and show() methods work perfectly, but nothing is redrawn. The menu expands to allow the submenu to be displayed, but the submenu (and the heading) aren't shown. According to the developer tools in every browser, display is set to block or none as appropriate.
I heard there might be an issue with Safari not redrawing things (since it's Webkit, but so is Chrome, so...). The solution, of course, is to use hide() and show() to force a redraw. In my case, this obviously wouldn't work: hide() and show() are the problems. I've tried not using jQuery, and I've also tried adding and removing a "hideThis" class that's styled to not be displayed. The only thing that marginally works is using hide(2000), but that only works for the first menu that you expand, and doesn't work every time.
I've tested this on two iPhones and two Android phones and a Windows desktop running Safari, all have the exact same reactions.
You can take a look at this at http://test.langcliffeavoca.church
EDIT: Hide() and show() definitely don't make a difference - I've tried hiding&showing this(), this.parent(), and this.children(), and tried doing it multiple times, and nothing helps. Through debugging I know that the events are being properly fired. I also know that the elements are in fact being shown and hidden, because I can close and reopen the side menu in browser, and everything appears correctly. It's just not being redrawn. This works correctly on Chrome, Firefox, Edge, and Internet Explorer, but not on Safari or native Android.
