Nano Hash - криптовалюты, майнинг, программирование

Выделите активную ссылку в меню аккордеона jQuery

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

Я пробовал кучу разных вещей, используя .slideDown('normal') в классе, который WordPress назначает родительскому <li> из .current-menu-parent и т. д., но, увы, пока ничего не сработало. Я не очень хорошо разбираюсь в JavaScript/jQuery, поэтому, надеюсь, кто-то может мне помочь с этим.

Вот текущий код jQuery:

( function( $ ) {
    $( document ).ready(function() {

        $('#cssmenu > ul > li > a').click(function() {

            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');   
            var checkElement = $(this).next();

            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }

            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }

            if($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;   
            }       

        });
    });
} )( jQuery );

Вот откуда я это взял.

wordpress jquery accordion
01.10.2014

  • Мысль: вы можете установить идентификатор одного из них в качестве параметра URL-адреса (например, domain.com/page?tab_id=5), захватите этот идентификатор при загрузке страницы и программно открыть вкладку, которую вы хотите отобразить. 01.10.2014
  • Разве это не информация для программного открытия вкладки для виджета аккордеона jQuery? Это просто какой-то пользовательский код, который я нашел. Не уверен, что это сработает в этом случае (как я уже сказал, я новичок в jQuery, поэтому, если вы не согласны, я попробую поработать с ним). Мысли? 01.10.2014
  • Это определенно не было бы то же самое, но принципы были бы похожи. Вы можете увидеть событие щелчка, объявленное в строке 315 в исходном коде страницы руководства. 01.10.2014

Ответы:


1

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

( function( $ ) { $( document ).ready(function() {

    $('.current-page-ancestor > a').trigger('click');
    $('.current-menu-item > a').trigger('click');

    $('#cssmenu > ul > li > a').click(function() {

        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');   
        var checkElement = $(this).next();

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }

        if($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;   
        }       

    });
});

} )( jQuery );

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

И если JS отключен, вы можете получить гораздо более изящную деградацию... используя псевдокод css :hover, чтобы аккордеон продолжал функционировать. Кроме того, вы можете использовать классы меню WordPress по умолчанию, чтобы аккордеон открывался при загрузке страницы через css, вместо того, чтобы полагаться на JS, чтобы найти, какой из них следует открыть... Просто мысль.

01.10.2014
  • Эй, спасибо, все заработало... но только когда я поместил строку .trigger, которую вы написали ПОСЛЕ функции .click. Что касается предложения CSS. Да, я согласен, в следующий раз, возможно. :) Еще раз спасибо! 01.10.2014
  • Рад, что это сработало. Имеет смысл вызывать их после того, как функция будет создана, так как она даже не будет знать, что функция существует! :) Не подумал об этом... 01.10.2014
  • Эй, я знаю, что это очень старый пост, но код у меня не работает, даже если я поставлю .trigger после функции .click - может кто-нибудь помочь! 19.09.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..