Добавьте код к элементам меню WordPress по классу.

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение
Дополнительные советы

Вопрос или проблема

Я пытаюсь добавить

onclick="toggle_visibility('sub-menu');"

в открывающий тег определенных пунктов меню, сгенерированных в WordPress. Я использовал следующую функцию для нацеливания на все родительские пункты меню, и теперь мне нужно найти правильный js для динамического добавления этого.

function menu_set_dropdown( $sorted_menu_items, $args ) {
    $last_top = 0;
    foreach ( $sorted_menu_items as $key => $obj ) {
        // это верхний уровень?
        if ( 0 == $obj->menu_item_parent ) {
            // установить ключ родителя
            $last_top = $key;
        } else {
            $sorted_menu_items[$last_top]->classes['dropdown'] = 'dropdown';
        }
    }
    return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );

Я попробовал это в моем футере, но это не работает. Возможно, я использую неправильный скрипт или неправильно его использую.

    <script type="text/javascript">
        $('.res-clearfix li.dropdown a').click(function() {
            onclick="toggle_visibility('sub-menu');"
        });
    </script>

Итак, да, лучше всего использовать новые обработчики событий вместо добавления атрибутов в ваши html-теги (так что ваш второй метод, в футере).

Причина, по которой ваш код в футере не сработал, заключается в том, что вы не совсем разобрались, как перевести из атрибута в форму обработчика…

Когда вы говорите onclick="toggle_visibility('sub-menu');", “onclick=” является html-атрибутом, и все внутри двойных кавычек после этого – это javascript-код.

Итак, чтобы сделать это в виде обработчика кликов jquery, вам нужно только часть javascript-кода:

<script type="text/javascript">
    $(function() { // <--- убедитесь, что мы не запускаем наш код до того, как страница будет готова!
        $('.res-clearfix li.dropdown a').click(function() {
            toggle_visibility('sub-menu');
        });
    });
</script>

Надеюсь, это поможет!

Ответ или решение

Чтобы понять, как интегрировать JavaScript-код в элементы меню WordPress и сделать это правильно, нужно тщательно изучить предоставленный код и предложенные решения. Начнем с анализа проблемы, а затем перейдем к ее решению.

Теория

Вы хотите добавить атрибут onclick к определенным пунктам меню в WordPress, используя JavaScript, чтобы динамически управлять видимостью подменю посредством функции toggle_visibility. Основной целью является привязывание обработчика событий click к элементу, что позволит пользователю взаимодействовать с меню без необходимости напрямую изменять HTML-код.

В WordPress меню генерируются динамически, и подход, основанный на использовании классов и фильтров, помогает изменить и настроить меню на этапе его рендеринга. Ваша функция menu_set_dropdown предназначена для добавления класса dropdown к каждому родительскому элементу меню, что вполне логично, так как предполагается, что именно эти элементы будут иметь подменю.

Однако, проблема возникает, когда вы пытаетесь внедрить inline-обработчик onclick, используя скрипт jQuery в нижнем колонтитуле (footer) сайта. Ваш первоначальный подход не сработал, потому что было неверное понимание того, как JavaScript-обработчики событий должны быть привязаны к элементам.

Пример

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

<script type="text/javascript">
    $('.res-clearfix li.dropdown a').click(function() {
        onclick="toggle_visibility('sub-menu');"
    });
</script>

Суть ошибки заключалась в том, что вы неправильно использовали sintax менеджера событий jQuery. onclick используется как HTML-атрибут, а внутри него должен располагаться функционал, который вы хотите исполнить при возникновении события.

Применение

Чтобы решить возникшую задачу, вы должны переписать код, основываясь на следующем плане:

Эффективное использование jQuery: Убедитесь, что код выполняется только после полной загрузки страницы.
Правильное определение обработчика событий: Привяжите функцию toggle_visibility непосредственно к событию click без использования атрибута onclick.

Вот обновленный код, который следует применить:

<script type="text/javascript">
    $(function() { // Это гарантирует, что код не будет выполнен, пока страница полностью не загрузится
        $('.res-clearfix li.dropdown a').click(function(event) {
            event.preventDefault(); // Предотвращаем переход по ссылке
            toggle_visibility('sub-menu'); // Вызываем функцию, меняющую видимость
        });
    });
</script>

Дополнительные советы

Оптимизация функции toggle_visibility: Убедитесь, что функция toggle_visibility работает корректно и она доступна для использования на уровне глобальной области видимости вашим кодом.
Рассмотрите применение CSS: В некоторых случаях использования только CSS достаточно для скрытия/раскрытия подменю с помощью :hover или CSS-трансформаций. Это может снизить зависимость от JavaScript.
Особенности WordPress: Убедитесь, что изменения, внесённые вами в меню, не конфликтуют с плагинами или темами, которые уже могут влиять на элементы меню.

В заключение, важно понимать, что разработка программного обеспечения — это постоянный процесс обучения и улучшений. Рассмотрите возможности оптимизации и тестирования вашего решения, и не забывайте о потенциальной необходимости модификаций в будущем, чтобы оставаться совместимыми с обновлениями WordPress и интернет-браузерами.