根据当前url选中一个复选框

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更改，只适用于刷新。

请记住，我使用的是WP的php菜单短代码，而不是这个问题中所示的静态ul li。我正在本地开发，所以我不能提供链接

Answer 1

不一定是一个答案，而是一个可行的解决办法。我使用过jQuery，因为我认为您可能正在使用它，因为现在大多数手风琴都是用jQuery插件构建的。

您可以向对应于复选框ID的URL添加散列：

<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演示。我制作了一个基本的手风琴菜单，并伪造了一个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');
});

看这里的演示。