Выпадающее меню в WordPress

В мобильной версии темы WordPress Twenty Fifteen сайдбар используется в виде выпадающего меню, которое отображается при нажатии на кнопку. Чтобы показать или скрыть меню используется JavaScript, который в свою очередь использует библиотеку jQuery.

Как я уже писал раньше, я поставил себе цель полностью выпилить jQuery из стандартной темы оформления Twenty Fifteen. Сначала перенес на CSS спойлер, который ранее работал на JavaScript и jQuery. И вот сейчас руки дошли до выпадающего меню в WordPress.

Для начала нужно полностью отключить загрузку jQuery, добавьте в файл в functions.php:

function wpdocs_dequeue_script() {
    wp_dequeue_style('jquery');
    wp_deregister_script('jquery');
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script' );

Чтобы показать или скрыть выпадающее меню при нажатии на кнопку, добавьте JavaScript ниже в файл footer.php:

<script type="text/javascript">
    var dropdownButton = document.getElementById("dropdown"),
    dropdownDiv = document.getElementById("secondary");

    dropdownButton.addEventListener("click", function () {
        dropdownButton.classList.toggle("toggled-on");
        dropdownDiv.classList.toggle("toggled-on");

    if (dropdownButton.getAttribute("aria-expanded") == 'false') {
        dropdownButton.setAttribute("aria-expanded", "true");
        dropdownDiv.setAttribute("aria-expanded", "true");
    }
    else {
        dropdownButton.setAttribute("aria-expanded", "false");
        dropdownDiv.setAttribute("aria-expanded", "false");
    }
});
</script>

Преимущества данного скрипта — нет необходимости подгружать jQuery. К недостаткам можно отнести то, что данный скрипт не работает в Opera Mini по причине отсутствия поддержки classList. Возможно, в будущем перепишу выпадающее меню на CSS, но сейчас не хочу заморачиваться.