nicht angemeldet
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.