onclick og <li>
Hejsa.Jeg har på Dynamic Drive (http://www.dynamicdrive.com/dynamicindex1/navigate1.htm) fundet en ganske fed menu, som jeg har brugt på den side jeg arbejder på. Den anvender et normalt HTML liste hieraki, hvor hvert <li> og <ul> får et ID, og blive manipuleret ved at document.onclick() og teste på ID.
jeg har dog modificeret den lidt, så det er onclick eventen for den enkelte <li> det fanges, hvorefter der skal køres tre forskellige funktioner. I kan se koden neden under.
Mit problem er at når et element i 2. eller 3. niveau aktiveres, så ser det ud som om der bliver fanget 2 eller 3 onclick events - en for hvert element i hierakiet over elementet, samt en for selve elementet.
Hvorfor sker det, og er det en måde at arbejde udenom det?
På forhånd tak
Michael Ingeman
p.s Her er de vigtigste dele af koden som lovet. Hyg jer :o)
<script language=\"JavaScript\" type=\"text/javascript\">
<!--
// Globale variabler
var activeElement;
function displayGroup(strGroupName, strGroupID)
{
alert(strGroupID + \", \" + strGroupName);
activeElement = strGroupID;
document.all[ \"txtGruppe\"].innerText = strGroupName;
}
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100´s more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (mark@robocast.com) November 2nd 1998
*/
function change()
// Pre : An event has been fired
// Post: The state of the folderlist has been changed
{
if(!document.all)
{
return;
}
else if (event.srcElement.id==\"foldheader\")
{
var srcIndex = event.srcElement.sourceIndex;
var nested = document.all[ srcIndex+1];
if (nested.style.display==\"none\")
{
nested.style.display=´´;
}
else
{
nested.style.display=\"none\";
}
}
}
// Konverter rgOps fra asp til javascript
var opsArray = new Array();
opsArray[ 0] = new Array(\"web001\",\"web002\",\"web003\",\"web004\",\"web006\");
opsArray[ 1] = new Array(\"web001\",\"web002\",\"web003\",\"web004\",\"web006\");
opsArray[ 2] = new Array(\"O1_001\",\"O1_001\",\"O1_001\",\"O1_001\",\"O1_001\");
opsArray[ 3] = new Array(\"\",\"O2_001\",\"O2_001\",\"O2_002\",\"O2_002\");
opsArray[ 4] = new Array(\"\",\"\",\"O3_001\",\"O3_002\",\"O3_004\");
//-->
</script>
</head>
<body background=\"images/globalimgs/GreyBackground.gif\">
<div align=\"center\">
<center>
<form name=\"opsaetninger\">
<table width=\"420\" border=\"0\" align=\"center\" bordercolor=\"#000000\" bgcolor=\"#ffffff\">
<tr bgcolor=\"#666666\">
<td ID=\"hvidOverskr\">Opsætningsgrupper:</td>
</tr>
<tr>
<td>
<ul>
<li id=\"foldheader\" onClick=´displayGroup(\"Dette er første niv 1 opsætning\", \"O1_001\")´>Dette er første niv 1 opsætning</li>
<ul id=\"foldinglist\" style=\"display:none\">
<li id=\"foldheader\" onClick=´displayGroup(\"På niv 2 går det godt\", \"O2_001\")´>På niv 2 går det godt</li>
<ul id=\"foldinglist\" style=\"display:none\">
<li><a href=´java script:populateLstOps(\"O3_001\"); displayGroup(\"nu er vi i bunden\", \"O3_001\")´>nu er vi i bunden</a></li>
</ul>
<li id=\"foldheader\" onClick=´displayGroup(\"også her\", \"O2_002\")´>også her</li>
<ul id=\"foldinglist\" style=\"display:none\">
<li><a href=´java script:populateLstOps(\"O3_002\"); displayGroup(\"det er mørkt hernede\", \"O3_002\")´>det er mørkt hernede</a></li>
<li><a href=´java script:populateLstOps(\"O3_004\"); displayGroup(\"bøh!\", \"O3_004\")´>bøh!</a></li>
</ul>
</ul>
<li><a href=´java script:populateLstOps(\"O1_003\"); displayGroup(\"og her er en til\", \"O1_003\")´>og her er en til</a></li>
</ul>
</td>
</tr>
<tr>
<td><b>Aktuel gruppe:</b> <span ID=\"txtGruppe\">Ingen gruppe valgt</span> </td>
</tr>
<tr>
<td><input name=\"inNyGruppe\" type=\"text\"> <input type=\"Button\" value=\"Tilføj gruppe\" onclick=\"java script:tilfoejGruppe()\"></td>
</tr>
</table>
</form>
</center>
</div>
</body>
</html>
