WordPress как сделать так, чтобы адаптивное меню на лэндинге автоматически сворачивалось при выборе пункта меню?

Question

[gmokeev]

Здравствуйте! Есть сайт ce62808-wordpress.tw1.ru необходимо сделать так, чтобы в мобильной версии при клике на пункт меню, происходил скорлл до этого пункта, а выпадающее меню автоматически сворачивалось?

Сейчас скролл есть, но меню не сворачивается, необходимо нажать на крестик :(

Answer 1

[Александр]

сделайте trigger по крестику перед/после скролла

Comments

[gmokeev]

Большое спасибо! Заранее извиняюсь, за дико глупые вопросы, но я только учусь. А как именно это сделать?) Что надо прописать, и куда это вставить? Т.е как это оформить в код? Я понял идею, автоматическое нажатие на крестик после или перед началом скролла. Вставить этот код можно прямо в редакторе тем шаблона в .js - script ?) Или может быть даже в разделе "функции темы"?)

[Александр]

gmokeev, а где у вас на этом сайте мобильное меню, которое скроллится до блоков?

[gmokeev]

Александр, Вот его я и не могу найти никак :D облазил все разделы "редактора тем", открыл файловый менеджер на хостинге. Но никак не могу найти свое меню. Сайт создавал с помощью темы Betheme и Элементора.

Соответственно меню создал путем установки якоря+произвольная ссылка. А мобильная версия была создана автоматически

[gmokeev]

Александр, вот сам сайт ce62808-wordpress.tw1.ru

[Александр]

ce62808-wordpress.tw1.ru/wp-content/themes/betheme...

в этом файле после строки 1396 попробуйте добавить такое

if (window.innerWidth < 768) {
      $('#Side_slide .close').trigger('click')
}

[gmokeev]

Александр, Большое спасибо! Добавил, но ничего не поменялось, может быть я как-то не правильно это сделал?

[gmokeev]

Александр, может быть вот в этих строках что-то подправить можно, чтобы оно при нажатие на пункт меню задвигалось?

// mobile

        $('li', menu).off('hover');

        $('li > .menu-toggle', menu).off('click').on('click', function() {

          var el = $(this).closest('li');

          if (el.hasClass(options.hoverClass)) {

            el.removeClass(options.hoverClass)
              .children('ul').stop(true, true).fadeOut(options.delay);

          } else {

            el.addClass(options.hoverClass)
              .children('ul').stop(true, true).fadeIn(options.delay);

          }

        });

      }

    };

[Александр]

gmokeev, попробуйте там же (1396 строка), но без условия $('#Side_slide .close').trigger('click')

[gmokeev]

Александр, в таком варианте меню вообще не открывается на мобильном.

Вот этот код дал результат, после нажатия на пункт меню - пункты меню пропадают, но остается черный прямоугольник и заново, до обновления страницы меню не открывается)

<script> jQuery(".menu-item").closest("#Side_slide").removeClass("#Side_slide").hide();
});
</script>

[Александр]

gmokeev,

$('#Side_slide').animate({
	'right': 0
}, 300);

$('body').animate({
	'left':  -($('#Side_slide').data('width'))/2
}, 300);

$('#body_overlay').fadeOut(300);

[gmokeev]

Александр, Здравствуйте! Спустя 2 дня экспериментов сработало это решение

<script>
jQuery(document).on("click",".menu-item", function(){

jQuery('#Side_slide .close').trigger('click') ;
	
});
</script>

Спасибо за помощь!