Добавить класс к элементу

118

18 февраля 2022, 15:40

помогите решить вопрос с списком есть список с вложенными ссылками

    <h3><a href="/kalendar">Календарь</a></h3>
    <p >
        <a href="#">Первый календарь</a><br>
        <a href="#">Второй календарь</a>
    </p>
    <h3><a href="/visitors_list">Cписок гостей</a></h3>
    <p>
        <a href="#">Первый список</a><br>
        <a href="#">Второй список</a>
    </p>

$(document).ready(function(){
    $(".spldv2 h3:first").addClass("spl2btact");
    $(".spldv2 p:not(:first)").hide();
    $(".spldv2 h3").on('click', function(e){
        if(e.target.tagName != 'A'){
            $(this).next("p").slideToggle("slow")
            .siblings("p:visible").slideUp("slow");
            $(this).toggleClass("spl2btact");
            $(this).siblings("h3").removeClass("spl2btact");
        };
     });
 });

Все работает корректно,первый список развернутый при загрузке страницы. Теперь как бы оптимизировать работу скрипта чтоб при открытии страницы /kalendar или /visitors_list был развернутый соответствующий список ? Помогите пожалуйста

Answer 1

Проверяйте нужный url через селектор: a[href="' + window.location.pathname + '"]'

Учитывая вашу верстку, после селекта нужного a, потребуется применить .parent() для работы с h3 привычным вам способом.

$(document).ready(function(){ 
    $('.spldv2 h3 a[href="' + window.location.pathname + '"]')
    .parent().next("p").slideDown("slow")
    .siblings("p:visible").slideUp("slow");
    $('.spldv2 h3 a[href="' + window.location.pathname + '"]')
    .parent().addClass("spl2btact"); 
    $('.spldv2 h3 a[href="' + window.location.pathname + '"]')
    .parent().siblings("h3").removeClass("spl2btact");

    $(".spldv2 h3").on('click', function(e){
        if(e.target.tagName != 'A'){
            $(this).next("p").slideToggle("slow")
            .siblings("p:visible").slideUp("slow");
            $(this).toggleClass("spl2btact");
            $(this).siblings("h3").removeClass("spl2btact");
        };
     });
 });

Ссылка на fiddle: https://jsfiddle.net/54mzty0w/ (нажмите run и посмотрите).

Вот здесь хороший ответ для задачи проверки текущего url с href ссылки: https://stackoverflow.com/questions/4443276/jquery-if-link-page-url

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сравнить размеры двух ящиков?

Даны два ящика с размерами (L,B,H)Нужно написать красивую(оптимизация по скорости) функцию сравнения размеров, function sizes_compare(l1, b1, h1, l2, b2, h2):booleean,...

PHP

Как отправить значение тега radio на почту?

Сразу скажу, ламер я полный, к делуПишу страницу - отзыв для компании

174

PHP

Не хватает памяти для обработки больших массивов

На виртуальном сервере не хватает памяти для обработки некоторых файлов, хотя на локальном всё в порядкеОшибка: Fatal error: Allowed memory size of 134217728...

PHP

Ajax-запрос в базу данных раз в минуту

В базе данных есть таблица, в которой хранятся уведомления от администрации, для каждого пользователяТребуется выводить непросмотренные...