我用以下(非常)简陋的jQuery hackish方式拼凑了下面的内容:
$(".toggle_container").hide();
$(".trigger a").addClass("close");
$(".trigger a").click(function() {
$(".toggle_container").slideUp('200','swing');
$(".trigger a").removeClass("open").addClass("close");
if ($(this).next(".toggle_container").is(":hidden")) {
$(this).next(".toggle_container").stop(true,false).slideToggle('200','swing');
}
});
jsfiddle在这里:http://jsfiddle.net/FWzWu/8/
我从未使用过jquery cookie插件,但现在想用它来记住页面之间的用户菜单状态。在这里使用github插件:https://github.com/carhartl/jquery-cookie
非常感谢任何帮助! 谢谢!
答案 0 :(得分:1)
A first stab (我添加了对event.preventDefault()
的调用以停止点击时发生的默认锚点操作 - 您可能需要将其删除)。
它可以做一些清理工作,例如利用事件委托来捕获锚元素上的click事件会很好,希望它能传达如何使用插件以及在何处使用它。
$(function () {
// give each container a unique class
var containers = $("ul.toggle_container").hide().each(function (i,v) {
$(this).addClass('container_' + i);
});
var value = $.cookie('toggled_container');
// if we have a value in the cookie, use it to show that container
if (value) {
$('ul.' + value).show();
}
var anchors = $("li.trigger a");
anchors.addClass("close").click(function() {
containers.slideUp('200','swing');
anchors.removeClass("open").addClass("close");
var nextContainer = $(this).next("ul.toggle_container");
if (nextContainer.is(":hidden")) {
// capture the unique class that we have given the container
$.cookie('toggled_container', nextContainer.attr('class').match(/container_\d+/));
nextContainer.stop(true,false).slideToggle('200','swing');
}
});
});
显然,这个解决方案假设您的容器永远不会改变数量和顺序;如果他们这样做,错误的容器将最终在页面加载时扩展:)
答案 1 :(得分:0)
在你列出的页面上(github一个)有一个readme,我从来没有使用过该插件,但看起来很简单。
确保包含脚本;
<script src="/path/to/jquery.cookie.js"></script>
现在,每当您想要更改cookie值(或首先创建cookie)时,请使用;
$.cookie('cookie_name', 'cookie_value', { expires: 7 });
将* cookie_name *和* cookie_value *更改为您想要的任何内容。例如
$.cookie('nav_choice', '1', { expires: 7 });
然后每次加载页面都会在document.ready;
中运行var nav = $.cookie('nav_choice');
然后你可以运行if()语句来确定要显示的内容。
这有帮助吗?如有必要,我可以详细说明。