Jquery accordion keeping state in menu for links not contained within the menu
I have been battling to get an accordion to keep state across links that aren't in the accordion menu and wondering if it is even possible.I am using jquery-1.6.2.min.js + query-ui-1.8.14.custom.min.js.
I have created a menu which has 3 levels. I have no problem keeping state here but I am wondering how does one keep state of a url that is not contained in the menu. For example if I click on 'Advanced' (html code below) it correctly displays the accordion menu and the correct selected menu item. However this 'Advanced' page has subsequent separate pages. Now my idea is that if one of these subsequent pages are clicked on, then the 'Advanced' link in the accordion menu should remain selected and thus 'Advanced' will continue to be displayed.
I gathered that the only way of doing this would be to make use of jquery.cookie and if a menu url is clicked then the cookie would be updated with the url of the menu item. If a url, which is not in the menu, was clicked on - the cookie would not be updated but the original menu item would stay displayed. However I cant get this to work.
I have made use of navigationFilter within the accordion function and various other ways but with no luck.
The menu html looks like the following:
<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="acch开发者_开发技巧eader">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>
The jquery is as follows:
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();
}
);
You will notice in the above that I do also add and remove certain classes for cosmetic reasons. I also add a class for the the active menu link. I have removed the navigationFilter from the above but I did try the following:
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();
}
}
I gather that returning true, when the menucookie matches is not correct but I am not sure what else to do. Do you have any suggestions? Im a n00b so i might be doing everything incorrectly.
Thanks
Ok did it another way and rewrote most of the accordion and html. Using cookies, I can safely open the section of the accordion I want when I want. It updates the cookie if one of the links in the menu are clicked otherwise any page that does not have a link in the menu does not cause the cookie to be updated but retains the previous value. The cookies value is used to activate the relevant section of the menu.
It is a 3 level accordion menu, so that added complexity - but it works.
精彩评论