Доработка виджета произвольного меню [дополнение]

В одной из своих записей – «Доработка виджета произвольного меню» я предлагал небольшую доработку виджета произвольного меню WordPress, это предложение касалось не только меню выводимого виджетом, но и основного меню сайта.

Основное меню сайта мало чем отличается от меню созданного виджетом в сайдбаре, однако, есть одно крайне важное отличие – выделение активного пункта меню и сохранение его “раскрытости” в общем списке пунктов. Т.е. если пользователь находится на какой-либо дочерней странице странице, то родительский пункт меню основного меню должен быть раскрыт, а активный пункт выделен.

Напомню, я предлагал дополнить файл footer.php используемой темы следующим скриптом:

<script>
jQuery(document).ready(function() {
    // Выбираем все ссылки из .menu-item имеющего во вложении .sub-menu
    jQuery('.widget .menu-item:has(.sub-menu)').children('a').toggle( 
    function() {
        // Показываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'block');  
    }, function() {
        // Скрываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'none'); 
    });
});
</script>

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

jQuery('.current-menu-item').parent('ul').css('display', 'block');

Таким образом, в итоге, скрипт будет выглядеть так:

<script>
jQuery(document).ready(function() {
    // Выбираем все ссылки из .menu-item имеющего во вложении .sub-menu
    jQuery('.widget .menu-item:has(.sub-menu)').children('a').toggle( 
    function() {
        // Показываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'block');  
    }, function() {
        // Скрываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'none'); 
    });
    // Раскрываем родительский пункт меню если активна дочерняя страница
    jQuery('.current-menu-item').parent('ul').css('display', 'block');
});
</script>
Опубликовано

Обратите внимание на предыдущие записи: