我有一个可以完成我想要的脚本。但是我想添加cookie支持以允许用户返回页面并使他们的菜单历史记录相同。我不确定如何实现它,但这是代码。它生成一个可折叠的菜单,只是不保存菜单状态。希望有人可以提供一些亮点,我并不是真的想要使用不同的插件,只需添加到这个插件就可以了。 =(
<script type="text/javascript">
/* aqTree2
Explorer-style trees from unordered lists
http://www.kryogenix.org/code/browser/aqtree2/
Usage:
Create a valid nested unordered list (UL) structure
Make the top-level UL of class aqtree2
Include this script
That's it!
*/
/* -----------------------------------------------------------------------------------
functions to build the tree on document load
----------------------------------------------------------------------------------- */
function getRandomID() {
myRandomID = '';
for (irandom=0;irandom<10;irandom++) {
p = Math.floor(Math.random()*26);
myRandomID += 'abcdefghijklmnopqrstuvwxyz'.substring(p,p+1);
}
return myRandomID;
}
function makeaqtree(ul,level) {
var cn=ul.childNodes;
var myReplacementNode = document.createElement("div");
// Walk through all LIs that are subordinate to this UL
for (var icn=0;icn<cn.length;icn++) {
// Check for validity
if (cn[icn].nodeName.toUpperCase() != 'LI') {
if (cn[icn].nodeName == '#text') {
var isBlankNV = cn[icn].nodeValue.replace(/[\f\n\r\t\v ]*/,'');
if (isBlankNV.length > 0) {
alert("UL structure is invalid; a UL contains a text node: '"+cn[icn].nodeValue+"'");
return;
}
} else {
alert("UL structure is invalid; a UL contains something other than an LI (a "+cn[icn].nodeName+", in fact)");
return;
}
}
// We know that the node we have now is an LI
// Walk through it and get all its content; add that content to a div
// If the content contains a UL, then:
// call makeaqtree with the UL; this will create its content as a div and return that div
// our content div must get an onClick handler that shows/hides the id'ed div
var contentNodes = cn[icn].childNodes;
var thereIsASubMenu = 0;
var subNodes = new Array();
for (var icontentNodes=0;icontentNodes<contentNodes.length;icontentNodes++) {
var thisContentNode = contentNodes[icontentNodes];
if (thisContentNode.nodeName == 'UL') {
var subMenu = makeaqtree(thisContentNode,level+1);
thereIsASubMenu = 1;
} else {
// get a copy of this node ready to add to our new tree
subNodes[subNodes.length] = thisContentNode.cloneNode(true);
}
}
// Create the container element to put all the subnodes in (we will then add this
// container element to our new tree)
// If there's a submenu, then the container element is an anchor; if not, it's a div
if (thereIsASubMenu) {
var containerDiv = document.createElement("div");
var containerElement = document.createElement("span");
containerDiv.appendChild(containerElement);
var icon = document.createElement("a");
icon.innerHTML = aqtree2_expandMeHTML;
icon.className = 'aqtree2icon';
icon.id = 'icon-'+subMenu.id;
containerElement.appendChild(icon);
icon.setAttribute("attachedsection",subMenu.getAttribute("id"));
icon.setAttribute("href","#");
icon.onclick = aqtree2ToggleVisibility;
} else {
var containerElement = document.createElement("span");
var containerDiv = containerElement;
if (subNodes.length > 0) {
var icon = document.createElement("span");
icon.innerHTML = aqtree2_bulletHTML;
icon.className = 'aqtree2icon';
containerElement.appendChild(icon);
}
}
// Add all subnodes to the container element
for (isubNodes=0;isubNodes<subNodes.length;isubNodes++) {
sN = subNodes[isubNodes];
if (sN.nodeName == '#text' && sN.nodeValue.replace(/[ \v\t\r\n]*/,'').length == 0) continue;
containerElement.appendChild(sN);
}
if (thereIsASubMenu) {
// now add the submenu itself!
containerDiv.appendChild(subMenu);
}
myReplacementNode.appendChild(containerDiv);
}
// generate a random ID
var randID = getRandomID();
myReplacementNode.setAttribute("id",randID);
myReplacementNode.style.display = 'none';
myReplacementNode.style.paddingLeft = (level*10)+'px';
// return our node
return myReplacementNode;
}
function makeaqtrees() {
// do it for each appropriate UL
uls = document.getElementsByTagName("ul");
for (iuls=0;iuls<uls.length;iuls++) {
ULclassName = uls[iuls].className;
if (ULclassName) {
if (ULclassName.match(/\baqtree2\b/)) {
returnNode = makeaqtree(uls[iuls],0);
returnNode.style.display = 'block';
pn = uls[iuls].parentNode;
pn.replaceChild(returnNode,uls[iuls]);
}
}
}
}
function initaqtrees() {
// Check the current browser has the spuds to do the work
if (document.createElement &&
document.getElementsByTagName &&
RegExp &&
document.body.innerHTML)
makeaqtrees();
else
return;
}
window.onload = initaqtrees;
/* -----------------------------------------------------------------------------------
functions to handle the tree when working
----------------------------------------------------------------------------------- */
function aqtree2ToggleVisibility() {
elemID = this.getAttribute("attachedsection");
thisElem = document.getElementById(elemID);
thisDisp = thisElem.style.display;
thisElem.style.display = thisDisp == 'none' ? 'block' : 'none';
// change the icon
icon = document.getElementById("icon-"+elemID);
if (icon) icon.innerHTML = thisDisp == 'none' ? aqtree2_collapseMeHTML : aqtree2_expandMeHTML;
return false;
}
/* -----------------------------------------------------------------------------------
required data -- override this in the page if you want
----------------------------------------------------------------------------------- */
aqtree2_expandMeHTML = '+';
aqtree2_collapseMeHTML = '-';
aqtree2_bulletHTML = ':';
</script>