我一直在争取让手风琴保持跨越不在手风琴菜单的链接的状态,并且怀疑它是否可能。我正在使用jquery- 1.6.2.min.js + query-ui-1.8.14.custom.min.js。Jquery手风琴保持菜单状态菜单中不包含在菜单内的链接
我创建了一个有3个级别的菜单。我在这里保持状态没有问题,但我想知道如何保持菜单中不包含的url的状态。例如,如果我点击'高级'(下面的html代码),它会正确显示手风琴菜单和正确选择的菜单项。然而,这个“高级”页面随后有单独的页面。现在我的想法是,如果点击其中一个后续页面,则手风琴菜单中的“高级”链接应保持选中状态,因此“高级”将继续显示。
我收集到这样做的唯一方法就是利用jquery.cookie,如果点击菜单url,那么cookie将被更新为菜单项的URL。如果点击了不在菜单中的网址 - Cookie不会被更新,但原始菜单项将保持显示。但我不能让这个工作。
我已经使用手风琴功能和其他各种方式的navigationFilter,但没有运气。
菜单HTML如下所示:
<div class="submenu">
<ul id="accordion">
<h3 class="h3"><a href="#">System Setup</a></h3>
<div>
<ul id="accordion-syssetup">
<!-- System setup menu -->
<li>
<a href="#" class="accheader">Setup</a>
<ul>
<li><a href="/advanced.php">Advanced</a></li>
<li><a href="/general.php">General</a></li>
</ul>
</li>
<li>
<a href="#" class="accheader">Tools</a>
<ul>
<li><a href="/nslookup.php">Nslookup</a></li>
<li><a href="/ping.php">Ping</a></li>
</ul>
</li>
<li>
<a href="/system_hosts.php">Hosts</a>
</li>
</ul>
</div>
<h3 class="h3"><a href="#">Security</a></h3>
<div>
<ul id="accordion-security">
<!-- Security menu -->
<li>
<a href="#" class="accheader">User Management</a>
<ul>
<li><a href="/user.php">Users</a></li>
<li><a href="/groups.php">Groups</a></li>
</ul>
</li>
<li><a href="/certs.php">Certificates</a></li>
</ul>
</div>
</div>
了jQuery如下:
var $j = jQuery.noConflict();
$j().ready(
function(){
// Set the cookie
var currentURL = window.location.toString().split("/");
var currentURL = currentURL[currentURL.length-1];
if ($j.cookie('menu') == null) {
$j.cookie('menu', currentURL, { expires: null, path: '/'});
}
var menucookie = $j.cookie('menu');
// Top level
$j("#accordion").accordion({
header: 'h3.h3',
autoHeight: false,
navigation: true,
collapsible: true,
alwaysOpen: false,
active: false
});
// Second level
$j("#accordion-syssetup").accordion({
header: "a.accheader",
navigation: true,
clearStyle: true,
autoHeight: false,
collapsible: true,
alwaysOpen: false,
animated: 'slide'
});
$j("#accordion-security").accordion({
header: "a.accheader",
navigation: true,
clearStyle: true,
autoHeight: false,
collapsible: true,
alwaysOpen: false,
animated: 'slide'
});
$j("#accordion").addClass("ui-widget ui-helper-reset");
$j("#accordion").removeClass("ui-accordion").find('h3.h3').removeClass("ui-accordion-header");
var currentURL = window.location.toString().split("/");
var currentURL = currentURL[currentURL.length-1];
if (!currentURL || currentURL == '') {
currentURL = 'index.php';
}
$j("#accordion:has(a)").each (function() {
if (currentURL) {
$j('a[href$="' + currentURL + '"]').addClass("sb-menu-active");
}
});
// Keep track of the cookie
$j("#accordion a").each (function() {
url = this.toString().split("/");
url = url[url.length-1];
if($j('a[href$="' + url + '"]').hasClass("sb-menu-active") == true) {
hasclass = true;
$j.cookie('menu', currentURL, { expires: null, path: '/'});
menucookie = $j.cookie('menu');
return false;
}
});
// Display the menu
$j(".submenu").show();
}
);
你会在上面发现,我也为化妆品的原因添加和删除某些类。我还为活动菜单链接添加了一个类。我已删除从上面的navigationFilter但我没有尝试以下方法:
navigationFilter: function() {
//Accordion NavigationFilter
var locationHrefArray = location.href.split("/");
var locationLastString = locationHrefArray[locationHrefArray.length - 1].toLowerCase();
if (this.href.toLowerCase() == locationLastString) {
return true;
} else if (locationLastString.match(menucookie)) {
return true;
} else {
return this.href.toLowerCase() == location.href.toLowerCase();
}
}
我推测,返回true,则menucookie匹配时是不正确的,但我不知道还能做什么。你有什么建议吗?我是一个n00b所以我可能会做一切不正确。
感谢