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将在页面加载时展开），因为该页面属于该类别。我需要一种基于当前网址检查某个框的方法。我找到了一个用AJAX缓存侧边栏的选项，但这对我来说真的不起作用，因为如果所有项目都在前一页面上展开，它们在新页面上保持不变，我只希望相关的父项是扩大。此外，缓存事件看起来像一个矫枉过正。我找到了一个php短代码来保存刷新时的标记，

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

但这不适用于网址更改，只刷新。

请记住，我使用WP菜单短信代码，而不是静态ul li，如此问题所示。我正在本地开发所以我无法提供链接

Answer 1

不一定是答案，而是一个可行的解决方案。我已经使用过jQuery，因为我假设你可能正在使用它，因为现在大多数手风琴都是用jQuery插件构建的。

您可以在与复选框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演示。我制作了一个基本的手风琴菜单，伪造了一个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.

根据当前网址选中一个框

1 个答案: