В мобильной версии темы 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, но сейчас не хочу заморачиваться.