Treemenu mit Layern - ein und ausblenden

[morgenstern]

Hallo Leute.

Ich verwende folgende Methode um ein Treemenu abzubilden. Dies klappt auch gut.

http://www.sitepoint.com/article/hierarchical-data-database

Dies listet mir schön ein Baummenü auf. Nur möchte ich dieses jetzt aus und einblenden lassen, sowie sollte in Klammer neben dem Menü stehen, wieviele Unterpunkte sich darin befinden.

Ich habe mich bereits länger darin versucht, bekomme dies aber nicht hin.

Zum Ein- und Ausblenden verwende ich <span> mit einer id.

function flip(id)
{
 if ( !document.getElementById(id) ) return;
 if ( document.getElementById(id).style.display == "none" )
 {
 document.getElementById(id).style.display = "block";
 document.getElementById("bild_" + id).src = "minus.gif";
 }
 else
 {
 document.getElementById(id).style.display = "none";
 document.getElementById("bild_" + id).src = "plus.gif";
 }
}

Der Link sieht dann so aus:

<a onclick="flip('id'); return false;" href="javascript:void(0);">link</a>
Der layer so:
<span id="id'" style="display:none">text</span>

Ich habe schon so einiges probiert, es will einfach nicht klappen. Ich bräuchte dies nämlich für einen Shop. Es gitb bis zu 2 Unterpunkte und sonst Produkte.

Hier noch ein Codeauszug aus einem Test:

<script language="JavaScript">

function flip(id)
{
 if ( !document.getElementById(id) ) return;
 if ( document.getElementById(id).style.display == "none" )
 {
 document.getElementById(id).style.display = "block";
 document.getElementById("bild_" + id).src = "minus.gif";
 }
 else
 {
 document.getElementById(id).style.display = "none";
 document.getElementById("bild_" + id).src = "plus.gif";
 }
}
</script>
<?
include("config.inc.php");



// $parent is the parent of the children we want to see
// $level is increased when we go deeper into the tree,
//        used to display a nice indented tree
function display_children($parent, $level) {
   // retrieve all children of $parent
   $result = mysql_query('SELECT * FROM tree '.
                          'WHERE parent="'.$parent.'";');
$i=0;

   // display each child
   while ($row = mysql_fetch_array($result)) {
       // indent and display the title of this child
       $tabelle='<table width="400" border="1" cellspacing="1" cellpadding="1">
	   <tr>
       <td>';
	   $end='</td>
       </tr>
       </table>';
	   if($level == "0")
	   {
	  
	   $link='</span></span></span><a onclick="flip(\'main_'.$row['id'].'\'); return false;" href="javascript:void(0);">';
	   $link2='</a>';
	   $close2='<span id="main_'.$row['id'].'" style="display:none">';
	   }
	   
	   if($level == "1")
	   {
	   $zahl=mysql_num_rows($result);
	   $link='<a onclick="flip(\'sub_'.$row['id'].'\'); return false;" href="javascript:void(0);">';
	   $link2='</a>';
	   $test='+';
	   $leerzeichen=' ';
	   $close2='<span id="sub_'.$row['id'].'" style="display:none">';
	    $i++;
	   if($i == $zahl)
	   {
	   $span2='</span>';
	   }
	   }
	   if($level == "2" AND $row["spec"] == "0")
	   {
	   
	   $link='<a onclick="flip(\'subsub_'.$row['id'].'\'); return false;" href="javascript:void(0);">';
	   $link2='</a>';
	   $close='';
	   $test='&nbsp;&nbsp;+';
	   $leerzeichen=' ';
	   $close2='<span id="subsub_'.$row['id'].'" style="display:none">';
	  
	   }
	   
	    if($level == "2" AND $row["spec"] == "1")
	   {
	   
	   $link='';
	   $link2='';
	   $close='';
	   $test='&nbsp;&nbsp;+';
	   $leerzeichen=' ';
	   $close2='';
	 
	   
	   }
	   
	   if($level == "3")
	   {
	   
	   $zahl=mysql_num_rows($result);
	   $test='&nbsp;&nbsp;&nbsp;&nbsp;+';
	   $leerzeichen=' ';
	    
    $i++;
	   if($i == $zahl)
	   {
	   $span='</span>';
	   }
	   }
	   
	   echo str_repeat('  ',$level).$close.$span2.$link.$test.$leerzeichen.$row['title'].$link2." ($zahl)<br> $close2 $span \n";
	 
       // call this function again to display this
       // child's children
       display_children($row['title'], $level+1);
   }
}
display_children('',0);

ich hoffe es kann mir ewr helfen, danke

 

[Paula]

Servus,

eine direkte Hilfe kann ich dir zwar leider nicht geben, aber ich gebe dir mal einen Link zu einem sehr guten JavaScript Treemenu:
http://www.destroydrop.com/javascripts/tree/

Eventuell kannst du mit Hilfe des Quellcodes dein Problem lösen.


Gruß

 

[morgenstern]

Danke. Werde mir das einmal zu Gemüte führen. Vielleicht kann ich das adaptieren.