nicht angemeldet
Probleme mit aufklappbaren Listen
Hallo liebe Forenser,
ich hoffe, ihr könnt mir helfen. Mithilfe von SelfHTML konnte ich wunderbar aufklappbare Listen realisieren, so wie ich es wollte. Ein Ausschnitt hieraus:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sprachen der Welt</title>
<link rel="stylesheet" media="screen, projection">
<style type="text/css">
/* Formatierung des Baums */
span.childs {
cursor: pointer;
}
span.childs:hover {
font-weight: bold;
}
/* Klassen für das öffnen und schließen eines Knotens */
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
<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>
</head>
<body onload="treeMenu_init(document.getElementById('lebewesen'), unescape(window.name).split(',')[0]); treeMenu_init(document.getElementById('wissenschaften'), unescape(window.name).split(',')[1])" onunload="window.name = escape(treeMenu_store(document.getElementById('lebewesen')) + ',' + treeMenu_store(document.getElementById('wissenschaften')))">
<form method="get" action="http://www.google.de/custom">
<p>
<input type="hidden" name="domains" value="web.de;officium-linguarum.de.tl"></input>
<input type="text" name="q" size="10" maxlength="255" value=""></input>
<input type="submit" name="sa" value="Suchen"></input>
<input type="radio" name="sitesearch" value="web.de"></input>
web.de
<input type="radio" name="sitesearch" value="officium-linguarum.de.tl"></input>
officium-linguarum.de.tl
<input type="hidden" name="client" value="pub-9542268901095267"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="UTF-8"></input>
<input type="hidden" name="oe" value="UTF-8"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="de"></input>
</p>
</form>
<h1>Sprachen der Welt</h1>
<ul id="lebewesen">
<li><div><span class="childs">Afroasiatische Sprachen</span></div>
<ul>
<li><div><span class="childs">Ägyptisch</span></div>
<ul>
<li><div><span>Koptisch</span></div></li>
</ul>
</li>
<li class="ende"><div><span class="childs">Berbersprachen</span></div>
<ul>
<li><div><span>Guanche †</span></div></li>
<li><div><span class="childs">Nördliche Berbersprachen</span></div>
<ul>
<li><div><span class="childs">Atlas-Berberisch</span></div>
<ul>
<li><div><span class="childs">Tachelhit</span></div>
<ul>
<li><div><span>Judäo-Berberisch</span></div></li>
</ul>
<li class="ende"><div><span>Zentralmarokkanisches Tamazight</span></div></li>
</ul>
</li>
<li class="ende"><div><span class="childs">Kabylisch</span></div>
<ul><li><div><span>Kabylisch</span></div></li>
</ul>
</li>
...
</body>
</html>
Mit dem Editor funktioniert das wunderbar, wenn ich die htm-Datei im Firefox oder IE öffne. Wenn ich den Code allerdings auf einer anderen - öffentlichen - Internetseite ausprobieren möchte, lassen sich die Listen nicht mehr zuklappen. Ich vermute, es liegt an dem Javascript-Teil, aber so bewandert bin ich da auch nicht.
Ich habe es hier versucht: www.officium-linguarum.de.tl/Test, allerdings bearbeite ich die Seite von einem anderen Baukasten-Tool aus. Ich kann den Code zwar direkt einfügen, aber für etwaige vorgefertigte Codes kann ich nichts.
Ich hoffe, dass man das Problem irgendwie clever angehen kann.
-
Entschuldigung, die Seite lautet http://www.officium-linguarum.de.tl/Test.htm