本周我研究并组合了一些 jquery(这是我第一次使用 jquery)来控制自定义 WordPress sidebar.php 文件中的可折叠菜单。菜单是动态生成的,使用 wp_query 通过自定义分类法和自定义排序顺序等来选择和排序自定义帖子类型(因此没有插件解决方案)。
我想在网站访问者浏览内容时保持菜单部分的展开/折叠状态。使用jquery,我似乎成功地将唯一的cookie名称写入浏览器,并且我似乎成功传递了标签的“展开”或“折叠”类值。
但是,cookie 不能跨多个页面工作 - 如果您导航到另一个页面,则在您单击菜单项之前不会设置新的 cookie。如果您点击后退浏览器并返回上一页,您的 cookie 会设置在上一页上are仍然设置(这很好)。请注意,当导航到新页面时,菜单会重新生成,但菜单内容很少更改(因此 ID 是稳定的),并且 cookie 仅适用于当前会话(并且仍应保留前一页的内容) 。
我尝试过设置 PHP cookie,它们在各个页面上都保持得很好。但我的 jquery cookie 似乎是特定于页面的,所以我做错了。
这是出现在我的 PHP 页面中的 jquery 代码,用于控制菜单并写入我的 cookie(注意:我am链接到 jquery.cookie.js 插件):
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#port-menu > li > a.expanded + ul, #port-menu > li ul li > a.collapsed + ul').slideToggle('medium');
$('#port-menu > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
var vartag = $(this).get(0).tagName.toLowerCase();
var varclass = $(this).attr('class');
var cookiename = $(this).parent().attr('id');
$.cookie(cookiename, $(this).attr('class'));
});
$('#port-menu > li ul li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
var vartag = $(this).get(0).tagName.toLowerCase();
var varclass = $(this).attr('class');
var vargenre = $(this).parent().parent().parent().attr('id');
var varoutlet = $(this).parent().attr('id');
var cookiename = vargenre + varoutlet;
$.cookie(cookiename, $(this).attr('class'));
});
}, 250);
});
</script>
例如,动态创建的 cookie 名称和值如下所示:
流派2:折叠
流派3:扩展
类型 1 出口 2:扩展
流派2outlet3:扩展
流派2outlet4:扩展
正如上面提到的,我是 jquery 的新手。我对使用 cookie 也很陌生。任何帮助将不胜感激。
附:一旦我开始工作,我不知道如何从我的 cookie 数组中获取信息并将这些类应用到我的菜单中 - 但这是一个单独的问题。