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