我设置了一个手风琴样式的导航列表,这样当点击类别时,它就会打开显示链接到页面的子类别。
我想做的是让手风琴导航列表在新页面打开时保持打开或关闭状态。
我已经收集到cookie在刷新时保持状态,但是当访问不同的页面时,我如何保持状态?所有的页面都有相同的手风琴导航列表
试试Web Storage。在页面卸载时存储选项卡的状态,在页面加载事件时恢复状态。
我找到了一个解决方案,它使用这里找到的accordian插件http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi和jquery cookie.js插件
我在html标记中为标题锚定页面添加了id,如下所示
<li>
<a id="m1" class="label" href="#">Sound/Audio Systems</a>
<ul class="acitem">
<li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li>
<li><a href="#">Loudspeakers</a></li>
<li><a href="#">Microphones </a></li>
<li><a href="#">DJ Equipment</a></li>
<li><a href="#">Sound Processing Equipment</a></li>
</ul>
</li>
并修改了accordian.js代码,我添加了以$开头的行。cookie和文档中的If语句。准备好函数。
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active'),
currentID = "";
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
}
else {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
});
return false;
}
}
}
);
});
};
$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
var anchor = "",
elementID = $.cookie('menustate');
anchor = document.getElementById(elementID);
$(anchor).addClass('active');
$(anchor).next().show();
}
});
它工作得很好,对于初学者来说还不错,谢谢所有的建议。
Rob芬威克cookie在为其指定的完整路径和域上"保留状态"。所以,如果你能让它们在一个页面上工作,你应该让它们在你网站的所有页面上自动工作。
你仍然可以使用cookie,你只需要确保它们不是特定于一个页面。例如:
document.cookie = 'openitem=5; expires=somedate; path=/';
将可以访问网站上的所有页面。
我看了一下你正在使用的库,它是一个不错的库,但你可能会发现如果你使用一个更标准的库,比如jQuery UI,它有一个手风琴控件http://jqueryui.com/demos/accordion/,就像我提到的,有很多人使用它,大多数问题的答案都可以找到。
但是就像我提到的,我确实看了一下你的图书馆。正如其他人提到的,您将使用cookie来存储值。该库支持"预展开"accordian的特定部分,为此您需要将扩展类添加到元素中。你既可以在服务器端完成,也可以在initMenu()被调用之前使用JavaScript完成。
另一个不太优雅的选项是在调用initMenu之后触发锚标记上的click事件。最后,你可以使用jQuery的show()来显示没有动画的部分。
你要做的第一件事是找出哪个部分被点击了,然后你会将该部分的名称存储在一个cookie中。在页面加载时,您将获得该值并展开相应的相应部分。这就是代码应该看起来的样子——注意,这是伪代码,你必须填写适当的部分。
$(function() {
$(".menu.collapsible .label").click(function() {
var accordianSection = $(this).text();
rememberSection(accordianSection);
});
var section = recallSection();
if(section !== undefined) {
expandSection(section);
}
});
expandSection函数看起来像这样:
var sectionLink = $(".menu.collapsible .label").filter(function() {
return $(this).text() == section;
});
sectionLink.trigger('click');