herbert101
Cadet 4th Year
- Registriert
- Okt. 2008
- Beiträge
- 66
Hi,
Ich habe eine Navigation, die eine Ausklappbare Liste ist (Script von SelfHTML).
Jetzt includiere ich per php die Navigation auf den jeweiligen Seiten.
Wenn ich nun auf einen Link in einem aufgeklappten Bereich klicke wird die neue Seite geöffnet und die Navigation neu includiert, allerdings wieder komplett geschlossen und eben nicht geöffnet in dem Bereich auf dessen Unterpunkt ich gerade geklickt habe. Gibt es eine elegante Art das zu ändern? Vielleicht irgendwie in der Link-Seite einen Wert, der an die Navigation-Seite übergeben wird "hallo bleib offen"...wie ihr merkt beherrsche ich kein Javascript...
Vielen Dank Gruß herbert101
Ich habe eine Navigation, die eine Ausklappbare Liste ist (Script von SelfHTML).
Jetzt includiere ich per php die Navigation auf den jeweiligen Seiten.
Wenn ich nun auf einen Link in einem aufgeklappten Bereich klicke wird die neue Seite geöffnet und die Navigation neu includiert, allerdings wieder komplett geschlossen und eben nicht geöffnet in dem Bereich auf dessen Unterpunkt ich gerade geklickt habe. Gibt es eine elegante Art das zu ändern? Vielleicht irgendwie in der Link-Seite einen Wert, der an die Navigation-Seite übergeben wird "hallo bleib offen"...wie ihr merkt beherrsche ich kein Javascript...
Vielen Dank Gruß herbert101
Code:
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">
/*
* Fügt den Listeneinträgen Eventhandler und CSS Klassen hinzu,
* um die Menüpunkte am Anfang zu schließen.
*
* menu: Referenz auf die Liste.
* data: String, der die Nummern aufgeklappter Menüpunkte enthält.
*/
function treeMenu_init(menu, data) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
if(array.length > 0 && array[0] == i) {
array.shift();
}
}
}
}
/*
* Ändert die Klasse eines angeclickten Listenelements, sodass
* geöffnete Menüpunkte geschlossen und geschlossene geöffnet
* werden.
*
* event: Das Event Objekt, dass der Browser übergibt.
*/
function treeMenu_handleClick(event) {
if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}
/*
* Gibt alle Klassen zurück, die einem HTML-Element zugeordnet sind.
*
* element: Das HTML-Element
* return: Die zugeordneten Klassen.
*/
function treeMenu_getClasses(element) {
if(element.className) {
return element.className.match(/[^ \t\n\r]+/g);
}
else {
return new Array(0);
}
}
/*
* Überprüft, ob ein Array ein bestimmtes Element enthält.
*
* array: Das Array
* element: Das Element
* return: true, wenn das Array das Element enthält.
*/
function treeMenu_contains(array, element) {
for(var i = 0; i < array.length; i++) {
if(array[i] == element) {
return true;
}
}
return false;
}
/*
* Gibt einen String zurück, indem die Nummern aller geöffneten
* Menüpunkte stehen.
*
* menu: Referenz auf die Liste
* return: Der String
*/
function treeMenu_store(menu) {
var result = new Array();;
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
result.push(i);
}
}
return result.join(" ");
}
</script>
<style type="text/css">
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
<body onload="treeMenu_init(document.getElementById('menu'), '')">
<ul id="menu">
<li>erstens
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>zweitens
<ul>
<li>a</li>
<li>b</li>
</ul>
</li>
</ul>
</body>
</html>