Autor Zpráva
MirekL
Profil
Potřeboval bych poradit, jak zajistit, aby se při kliknutí na položku v menu skryly položky v jiné větvi stejné úrovně. Např. pokud kliknu na B, tak se skryje vše pod A, pokud budu ve větvi A a kliknu na A1 a pak na A2, tak se skryje vše pod A1 a bylo vidět A2a, A2b a A2c.

Díky za pomoc Mirek

<head>

<script type="text/javascript">
function menu(id)
{_menu=document.getElementById(id);
if (_menu.style.display=='none') 
  {_menu.style.display='';} 
else {_menu.style.display='none';}}
</script>

</head>

<body>
<div id="menu">
<ul>
<li><a href="#">Domů</a></li>
<li><a href="javascript:menu('M1')">A</a>
	<ul id="M1" style="display:">
		<li><a href="javascript:menu('M11')">A1</a>
			<ul id="M11" style="display: none;">
				<li><a href="#">A1a</a></li>

				<li><a href="#">A1b</a></li>
				<li><a href="#">A1c</a></li>
				<li><a href="#">A1d</a></li>
			</ul>
		</li>
		<li><a href="javascript:menu('M12')">A2</a>
			<ul id="M12" style="display: none;">
			<li><a href="#">A2a</a></li>
			<li><a href="#">A2b</a></li>
			<li><a href="#">A2c</a></li>
			</ul>
		</li>
		<li><a href="javascript:menu('M13')">A3</a>
			<ul id="M13" style="display: none;">
			<li><a href="#">A3a</a></li>
			<li><a href="#">A3b</a></li>
			<li><a href="#">A3c</a></li>
			</ul>
		</li>
	</ul>
</li>

<li><a href="javascript:menu('M2')">B</a>
	<ul id="M2" style="display: none;">
	<li><a href="#">B1</a></li>
	<li><a href="#">B2</a></li>
	<li><a href="#">B3</a></li>
	</ul>
</li>
<li><a href="javascript:menu('M3')">C</a>
	<ul id="M3" style="display: none;">
	<li><a href="#">C1</a></li>
	<li><a href="#">C2</a></li>
	<li><a href="#">C3</a></li>
	<li><a href="#">C4</a></li>
	</ul>
</li>
</ul> 
</div>

</body>

imploder
Profil
Nechce se mi teď psát kód (beztak jsou tady větší experti než lama jako jsem já), ale asi bych položkám jako id dal jejich nadřazenou položku a jako parametr odkrývaci funkci (volané při kliknutí) předal její název (ten by měly jako své id její podpoložky) a id. Funkce by pak:
1. skryla všechny položky na stejné úrovni (tedy se stejným id)
2. odkryla všechny položky s id odpovídajícím předanému názvu

EDIT: id by asi nešlo, protože může být jen jedno stejné. Šlo by ale místo něj použít třídy (atribut class).
los
Profil *
Robil by som to tak, že používateľom so zapnutým JavaScriptom by som pomocou CSS schoval všetky vnorené zoznamy a pri kliknutí na niektorú položku by som JavaScriptom zobrazil vnorený zoznam tej položky a tiež všetky nadradené zoznamy. Pamätal by som si položku, na ktorú sa kliklo naposledy, a pred zobrazením tých zoznamov by som ju rovnakým spôsobom schoval.

Takže napr. do CSS by som pridal pravidlo:
.js ul.menu ul { display: none; }

V HTML by som pridal tomu zoznamu triedu "menu" a tiež nejaký identifikátor:
<ul id="moje-menu" class="menu">...</ul>

A JS asi nejako takto:
var Menu = {
	init: function(id) {
		document.getElementById(id).onclick = function(e) {
			e = e || window.event;
			
			for (var li = e.target || e.srcElement; li; li = li.parentNode)
				if (li.tagName == "LI") {
					if (this.lastLi)
						Menu.toggle(this.lastLi, "");

					Menu.toggle(this.lastLi = li, "block");
					break;
				}
		}
	},
	toggle: function(li, display) {
		for (var ul = li.firstChild; ul; ul = ul.nextSibling)
			if (ul.tagName == "UL")
				ul.style.display = display;
		
		for (var ul = li.parentNode; ul; ul = ul.parentNode)
			if (ul.tagName == "UL")
				ul.style.display = display;
	}
};

// toto je najlepšie vykonať čo najskôr, takže napr. v JavaScripte umiestnenom v head spolu s Menu,
// ktoré by bolo v externom súbore
document.documentElement.className = "js";

// toto musíš volať samozrejme až po tom, ako sa to menu do dokumentu nahrá
// (takže napr. hneď za tým) alebo v horšom prípade v onload
Menu.init("moje-menu");
los
Profil *
Keď to chceš iba pri kliknutí na odkaz (nie na LI), tak to si upravíš ten cyklus v obsluhe onclick.
MirekL
Profil
2los: Díky moc - funguje jak jsem si představoval ;-)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0