本周我研究并整理了一些jquery(这是我第一次使用jquery)来控制自定义WordPress sidebar.php文件中的可折叠菜单.菜单是动态生成的,使用wp_query按自定义分类和自定义排序顺序等选择和排序自定义帖子类型(因此没有插件解决方案).
我希望在网站访问者浏览内容时保持菜单部分的展开/折叠状态.使用jquery看起来我成功地将唯一的cookie名称写入浏览器,看来我成功传递了我的标签的"展开"或"折叠"类值.
但是,cookie不能跨多个页面工作 - 如果您导航到另一个页面,则在单击菜单项之前不会设置新的cookie.如果您点击后面的浏览器并返回上一页,则仍会设置在上一页设置的cookie (这很好).请注意,当导航到新页面时,菜单会重新生成,但菜单内容很少更改(因此ID是稳定的),并且cookie仅适用于当前会话(并且仍应保留在上一页中) .
我已经尝试过设置PHP cookie,并且它们在页面之间保持良好的状态.但是我的jquery cookies似乎是特定于页面的,所以我做错了.
下面是出现在我的PHP页面来控制菜单,并写了我的饼干jQuery代码(注:我很链接到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>
Run Code Online (Sandbox Code Playgroud)
例如,动态创建的cookie名称和值如下所示:
genre2:崩溃了
genre3:扩展
genre1outlet2:扩展
genre2outlet3:扩展
genre2outlet4:扩展
如上所述,我是jquery的新手.我也是使用cookies的新手.任何帮助将不胜感激.
PS一旦我开始工作,我不知道如何从我的数组cookie获取信息并将类应用到我的菜单 - 但这是一个单独的问题.
Kac*_*iej 17
我想你应该尝试指定一个路径.它可能看起来像这样:
$.cookie(cookiename, $(this).attr('class'), { path: '/' });
Run Code Online (Sandbox Code Playgroud)
然后,当您设置cookie时,它将适用于所有网站.默认路径是设置cookie的子页面的路径.在这种情况下,cookie仅适用于该子页面.
这条规则(我的意思是路径)一般适用于cookie.不仅仅是那些由jQuery创建的.
| 归档时间: |
|
| 查看次数: |
5625 次 |
| 最近记录: |