Požadavky

1. Rozbalení/sbalení při kliknutí na položku,
2. sbalení při kliknutí někam mimo.

Postup řešení

Základ je jednoduché prohazování třídy. S tím, že rozbalovaná část je absolutně posicovaná.

Celé to komplikuje až vypínání menu při kliknutí mimo.

1. Vytvoří se funkce pro schování libovolné položky z #menu (odstraní případnou třídu, která submenu zviditelňuje),

   function closeAll() {
   	var items = document.getElementById("menu").getElementsByTagName("li");
   	for (var i = items.length - 1; i >= 0; i--) {
   		items[i].className = "";
   	};
   }

2. ta se zavolá při kliknutí někam do stránky.

   document.documentElement.onclick = closeAll;

„Probublávání“

Bohužel při kliknutí na položku, která rozkrývá podseznam, událost probublá i na documentElement, takže se submenu vzápětí ihned skryje.

Řešení je vypnutí této vlastnosti. Ve starších Explorerech funguje jen:

event.cancelBubble = true;

Ve všech novějších prohlížečích potom:

event.stopPropagation();

Aby to nebylo tak jednoduché, Firefox (Gecko) potřebuje na rozdíl od ostatních prohlížečů event předat do funkce.

<a onclick="funkce(event)" href="#">Rozbalit</a>

Kód sjednocující chování napříč prohlížeči proto značně nabobtná.

function nazevFunkce(e) {
	e.cancelBubble = true; // vypnutí pro starší Explorery
	if (e.stopPropagation) e.stopPropagation(); // vypnutí pro ostatní
    // vlastní kód funkce
}

Výhoda potom je, že máme kód funkční ve všech prohlížečích (minimálně od IE 6).