Se você:
Você está no lugar certo!
Neste artigo vou disponibilizar os arquivos necessários para começar a usar, sem precisar entender muito bem, o misterioso XOXO.
xoxo.js
// JavaScript Document /* Welcome to the CHOT: Chris Holland Outline Toolbox This is a work in progress For more info: frenchy@gmail.com http://chrisholland.blogspot.com/ Copyright Chris Holland 2004-2005 Some rights reserved under a Creative Commons License: Share-alike, with Attribution, do whatever you want with it beyond that :) http://www.creativecommons.org/ ==================================================================================== Modified script in accordance with to validate the standards of the W3C (Strict 1.0) Flavio Theruo Kaminisse http://www.japs.etc.br http://creativecommons.org/licenses/by-nc-sa/2.0/br/deed.en http://creativecommons.org/licenses/by-nc-sa/2.0/br/ */ /* start basic stuff */ function isWithinNode(e,i,c,t,obj) { answer = false; te = e; while (te && !answer ) { if ( (te.id && (te.id == i)) || (te.className && (te.className == i+"Class")) || (!t && c && te.className && (te.className == c)) || (!t && c && te.className && (te.className.indexOf(c) != -1)) || (t && te.tagName && (te.tagName.toLowerCase() == t)) || (obj && (te == obj)) ) { answer = te; } else { te = te.parentNode; } } return te; }//isWithinNode function getEvent(event) { return (event ? event : window.event); }//getEvent() function getEventElement(e) { return (e.srcElement ? e.srcElement: (e.target ? e.target : e.currentTarget)); }//getEventElement() /* end basic stuff */ function handleClick(event) { e = getEvent(event); eL = getEventElement(e); if ( listItem = isWithinNode(eL,null,null,"li",null) ) { processListItem(listItem); }//if we clicked on a list item }//handleClick function processListItem(liObj,isInitMode) { childList = liObj.getElementsByTagName("ol"); if ( !childList || (childList.length == 0) ) childList = liObj.getElementsByTagName("ul"); if ( childList ) childList = childList[0]; if ( childList) { currentDisplay = childList.style.display; if ( !currentDisplay || (currentDisplay == "block") ) { if ( isInitMode && !(childList.className == "compact") ) showAsExpanded(liObj,childList); else showAsCompact(liObj,childList); } else { if ( isInitMode ) showAsCompact(liObj,childList); else showAsExpanded(liObj,childList); } } }//processListItem function showAsCompact(liObj, childList) { childList.style.display = "none" childList.setAttribute("class","compact"); //liObj.firstChild.className = "chot_compactHeader"; setClass(liObj.firstChild,"chot_compactHeader"); liObj.className="chot_compact"; //setClass(liObj,"chot_compact"); }//showAsCompact function showAsExpanded(liObj, childList) { childList.style.display = "block"; childList.removeAttribute("class"); //liObj.firstChild.className = "chot_expandedHeader"; setClass(liObj.firstChild,"chot_expandedHeader"); liObj.className = "chot_expanded"; //setClass(liObj,"chot_expanded"); }//showAsExpanded function setClass(o,v) { c = o.className; bc = new Array(); var j=0; var i=0; if (c) { c = c.split(" "); for ( i = 0; c[i]; i++ ) { if ( c[i].indexOf("chot_") == -1 ) { bc[j] = c[i]; j++; } } bc = bc.join(" "); o.className = bc + " " + v; }//class set on element }//setClass function initOutlines() { listItems = document.getElementsByTagName("li"); for ( i = 0; listItems[i]; i++ ) { processListItem(listItems[i],true); } }//initOutlines if ( document.addEventListener ) { document.addEventListener("mouseup", handleClick, false); window.addEventListener("load", initOutlines, false); } else { document.onmouseup = handleClick; window.onload = initOutlines; }
index.htm
<script src="xoxo.js"><!--mce:0--></script> <ul class="xoxo"> <li class="chot_compact">MENU <ul class="compact"> <li>Link 01</li> <li>Link 02</li> <li>Link 03</li> </ul> </li> </ul>
Leia também:
agosto 5th, 2008 at 19:19
Cool
I see that you went for class=”compact” instead of compact=”compact” Good call