Я использую плагин Sidr Menu в Wordpress. У Sidr есть несколько проблем в своем мобильном макете, который я исправил, используя немного javascript.Подменю не нарисовано (Sidr)
<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 и на рабочем столе Windows, работающем под Safari, и все они имеют одинаковые реакции.
Вы посмотрите на это в http://test.langcliffeavoca.church
EDIT можно: Скрыть() и шоу() определенно не делают разницы - я пытался скрываться & показывать это(), this.parent () и this.children(), и попытался сделать это несколько раз, и ничего не помогает. Благодаря отладке я знаю, что события должным образом запущены. Я также знаю, что элементы фактически отображаются и скрыты, потому что я могу закрыть и снова открыть боковое меню в браузере, и все выглядит правильно. Это просто не перерисовывается. Это корректно работает в Chrome, Firefox, Edge и Internet Explorer, но не на Safari или на родном Android.