"Unobtrusive - onclick" och dölja submeny

Det du bör göra är att loopa genom elementen, och kolla om id matchar. Gör det inte det, stäng menyn, annars öppna den. För detta syfte räcker följande kod got och väl.

<script type="text/javascript">

function showMenu(nr) {

	for(var i=0; i<4; i++){
		var element = document.getElementById("subMenu"+i);

		if (i==nr){
			element.style.display = "block"; // show
		}else{
			element.style.display = "none"; // hide
		}
	}
}
window.onload = showMenu;

</script>

HTML

<div id="menu_outer">
<ul id="menu_ul">
        <li><span onclick="showMenu(-1)">Close menu</span>
       </li>

        <li><span onclick="showMenu(0)">Music</span>
           <ul id="subMenu0">
              <li>good</li>
              <li>bad</li>
           </ul>
         </li>

        <li><span onclick="showMenu(1)">Film</span>
           <ul id="subMenu1">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

        <li><span onclick="showMenu(2)">Forums</span>
           <ul id="subMenu2">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

        <li><span onclick="showMenu(3)">Games</span>
           <ul id="subMenu3">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

    </ul>
</div>

Här har jag även ändrat id på menu och menu - man bör inte ha flera element med samma id.

Men! Det kanske går att automatisera processen så du slipper sitta och hålla koll på individuella ID och uppdatera "for(var i=0; i<4; i++){" om du lägger till något i menyn...

<script type="text/javascript">

function showMenu(nr) {
	var element;

	// Villkoret i<1000 är en säkerhetsspärr ifall kontrollen inuti i loopen skulle sluta fungera av någon anledning.
	for(var i=0; i<1000; i++){
		// Leta efter elementet ifråga
		element = document.getElementById("subMenu"+i)

		// Om elementet saknas har vi nått slutet av listan. Lämna loopen.
		if (!element)
			break;

		// '&& element.style.display == "none"' gör att listan stängs om du klickar en andra gång
		if (i==nr && element.style.display == "none"){
			element.style.display = "block"; // show
		}else{
			element.style.display = "none"; // hide
		}
	}
}

function initMenu(){
	var menu_ul_obj = document.getElementById("menu_ul");

	// Loopa igenom listföremålen
	// Varje körning av loopen plockar ut ett barn till menu_ul (ett li-element)
	for(var i=0; i<menu_ul_obj.children.length; i++){
		// Plocka ut rubriken
		var head = menu_ul_obj.children[i].getElementsByClassName("menu_item_head");

		// Om rubriken existerar, lägg till en event-hanterare.
		if(head[0]){
			head[0].onclick = new Function(   "showMenu(" + i + ");"   );
		}

		// Plocka ut listan
		var list = menu_ul_obj.children[i].getElementsByClassName("submenu_ul");

		// Om listan existerar, ge den ett id, samt göm den.
		if(list[0]){
			list[0].id = "subMenu"+i;
			list[0].style.display = "none"; // hide
		}

	}

}

window.onload = initMenu;

</script>

<div id="menu_outer">
<ul id="menu_ul">
        <li><span class="menu_item_head">Music</span>
           <ul class="submenu_ul">
              <li>good</li>
              <li>bad</li>
           </ul>
         </li>

        <li><span class="menu_item_head">Film</span>
           <ul class="submenu_ul">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

        <li><span class="menu_item_head">Forums</span>
           <ul class="submenu_ul">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

        <li><span class="menu_item_head">Games</span>
           <ul class="submenu_ul">
             <li>good</li>
             <li>bad</li>
           </ul>
       </li>

    </ul>
</div>

Välkommen till forumet förresten...

Hej!

Jag har några frågor och tankar kring det du har gjort som jag vill formulera
så jag återkommer imorgon då jag är piggare!

(y)