Установите флажок в соответствии с текущим адресом

Question

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

<div> 
    <input id="ac-1" name="accordion-1" type="checkbox" /> 
    <label for="ac-1">Menu category 1</label> 
    <ul> 
     <li class="ac-small first"><a href="li-1">List item 1</a></li> 
     <li class="ac-small first"><a href="li-2">List item 2</a></li> 
     <li class="ac-small first"><a href="li-3">List item 3</a></li> 
    </ul> 
</div> 
<div> 
    <input id="ac-2" name="accordion-1" type="checkbox" /> 
    <label for="ac-2">Menu category 2</label> 
    <li class="ac-small first"><a href="li-4">List item 4</a></li> 
    <li class="ac-small first"><a href="li-5">List item 5</a></li> 
    <li class="ac-small first"><a href="li-6">List item 6</a></li> 
</div> 

Это все работает хорошо, даже на мобильных телефонах и планшетах, но проблема в том, что всякий раз, когда посетитель изменяет страницу, любые проверяемые опции будут удалены. То, что я хочу достичь, следующее: Если пользователь находится на странице списка № 1, будет установлен флажок родителя (в этом случае категория меню 1 будет расширена при загрузке страницы), так как страница относится к этой категории. Мне нужен способ проверить определенное поле на основе текущего URL-адреса. Я нашел возможность кэшировать боковую панель с помощью AJAX, но это действительно не работает для меня, потому что, если все элементы были расширены на предыдущей странице, они останутся неизменными на новой странице, и я хочу, чтобы только соответствующий родитель был расширен. Кроме того, кеш-файл выглядит как перебор. Я нашел PHP шорткод, чтобы сохранить метки на обновления,

<?php if($_POST['check'] == 'checked'): ?>checked="checked"<?php endif; ?> 

, но это не работает на изменения URL-адреса, только обновить.

Готовьте, что я использую короткий код PHP для WP, а не статический ul li, как показано в этом вопросе. Я разрабатываю локально, поэтому не могу предоставить ссылку

Answer 1

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

Вы можете добавить хэшей в URL, которые соответствуют CheckBox ID:

<div> 
    <input id="ac-1" name="accordion-1" type="checkbox" /> 
    <label for="ac-1">Menu category 1</label> 
    <ul> 
     <li class="ac-small first"><a href="li-1#ac-1">List item 1</a></li> 
     <li class="ac-small first"><a href="li-2#ac-1">List item 2</a></li> 
     <li class="ac-small first"><a href="li-3#ac-1">List item 3</a></li> 
    </ul> 
</div> 

захватить хэш из URL, найдите соответствующий флажок с тем же ID и вызвать щелчок и проверить его:

$(document).ready(function() { 
    var hash = window.location.hash; // for example ac-1 
    if (hash) { 
     $('#'+hash).prop('checked', true).triggerHandler('click'); 
    } 
}); 

Проверьте это JSFIDDLE demo. Я сделал основное меню аккордеона и подделал хеш URL, чтобы он работал.

ОБНОВЛЕНО ВОПРОС

В соответствии с просьбой, это довольно просто сделать это для URL. Попробуйте это:

$(document).ready(function() { 
    // get url 
    var url = $(location).attr('href'); 
    // get part of url after last slash 
    var accordionID = url.substr(url.lastIndexOf("/")+1); 
    // trigger a click on checkbox representing that accordion li 
    $('a[href="'+accordionID+'"]').closest('div').find(':checkbox') 
     .prop('checked',true).triggerHandler('click'); 
}); 

See the demo here.