Добрый день. Имеется сайт с очень большим количеством страниц - овер 700. Ссылка на каждую страницу имеется в меню. Меню отсортировано по категориям, в каждой категории - ссылки и/или подкатегории. В этих подкатегориях - в свою очередь тоже ссылки. Структура вложенности выглядит примерно так:
| ПУНКТ МЕНЮ
|__ Категория страниц
|__ Просто ссылка на страницу
|__ Заголовок подкатегории
|__ Блок со ссылками, появляющийся при клике на пред. элемент
|__ Ссылка
|__ Ссылка
Напоминаю - страниц свыше 700.
Во время загрузки страницы всё это меню (сам HTML) загружается полностью. Все внутренние уровни вложенности имеют display: none. При клике на категорию и/или подкатегорию блоку, имеющему отношение к этой категории - присваивается display: block. Выглядит примерно так:
$(".category").on('click', function() { // Клик по заголовку категории
if (!$(this).hasClass("current")) {
$(".category").removeClass("current").next().slideUp(300); // У всех заголовков категорий убирается класс и следующие за ними элементы скрываются
$(this).addClass("current").next().slideDown(300); // Заголовку, по которому кликнули добавляется класс и следующий за ним элемент раскрывается
} else {
$(this).removeClass("current").next().slideUp(300);
}
});
Суть проблемы в том, что в мобильниках эти клики по пунктам срабатывают с ощутимой задержкой (до 1-1,5 сек). На десктопах - задержки почти нет. Точнее есть, но очень короткая, почти неощутимая. Подскажите - с чем это может быть связано? Я полагаю, что дело в слишком большом количестве блоков меню. Вероятно, мобильный браузер подтормаживает, когда обрабатывает такое количество. Других гипотез у меня нет. Пробовал убирать тайминг у slideUp/slideDown - не помогает. Если я прав, то как все же можно оптимизировать процесс? А если не прав - то в чем причина и, опять-таки, как можно это ускорить?
