sitter och pillar med en trädmeny, ska visa en produktkatalog för en webbshopp i administrations läget.
Har byggt upp hela trädet med layers så här:
[lager 1]
[lager1_a]
[lager 1_a_a]
[lager 1_a_b]
[lager 1_b]
[lager 1_b_a]
[lager 1_b_b]
[lager 2]
etc...
Således om jag tycker på top nivån så ska [lager 1_a], [lager 1_b] osv visas... och om jag sedan trycker på någon av dem så ska [lager 1_a_a], [lager 1_a_b] etc. visas..
ett träd med andra ord..
Har till att börja med försökt göra ett javascript som först kollar om [lager 1] har några "childnodes" och om så är fallet lopar igenom den första nivån och gör att de visas.
Får inga script error när jag kör min kod, men det är inget som fungerar.. är lite grön vad det gäller javascript och dom..
Så här ser min kod ut:
<script type="text/javascript">
function showNodes() {
if (document.getElementById) {
var root_node = document.getElementById('root_element_1');
if (root_node.hasChildnodes) {
var i;
for (i=1; i<root_node.childNodes.lenght; i++) {
var c = i+1;
var chld = "root_element_1_sub_"+c;
eval("document.getElementById('"+chld+"').style.display='block'");
}
}
}
}
</script>
.....
<div id="sitemap">
<!-- start root element 1 -->
<div id="root_element_1">
<img src="plus.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)" onClick="showNodes()"><span class="txt">Jeans</span></a>
<!-- start sub element 1 -->
<div id="root_element_1_sub_1" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="plus.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Diesel</span></a>
<!-- start sub_sub element 1 -->
<div id="root_element_1_sub_1_subsub_1" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="node.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Kulter</span></a>
</div>
<!-- end sub_sub element 1 -->
<!-- start sub_sub element 2 -->
<div id="root_element_1_sub_1_subsub_2" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="node.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Franker</span></a>
</div>
<!-- end sub_sub element 2 -->
<!-- start sub_sub element 3 -->
<div id="root_element_1_sub_1_subsub_3" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="node_end.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Kevlar</span></a>
</div>
<!-- end sub_sub element 3 -->
</div>
<!-- end sub element 1 -->
<!-- start sub element 2 -->
<div id="root_element_2" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="plus.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Levis</span></a>
</div>
<!-- end sub element 2 -->
<!-- start sub element 3 -->
<div id="root_element_3" style="display:none">
<img src="line.gif" border="0" align="absMiddle" hspace="0"> <img src="node_end.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Lee</span></a>
</div>
<!-- end sub element 3 -->
</div>
<!-- end root element 1 -->
<!-- start root element 2 -->
<div id="root_element_2">
<img src="plus.gif" border="0" align="absMiddle"> <img src="icon.gif" border="0" align="absMiddle"> <a href="javascript:void(0)"><span class="txt">Tröjor</span></a><br>
</div>
<!-- end root element 2 -->
</div>
hur ska javascriptet se ut?