Jourry Accordion mit PHP und MYSQL

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jourry Accordion mit PHP und MYSQL

    Ich habe mir folgende Seite erstellt. Leider funktioniert die JQuerry Accordion nicht bei den Untermenüs. Hier wird immer nur ein Eintrag der Untermenüs angezeigt.

    PHP-Code:

    <html>
    <head>
    <title>Accordion Menü mit PHP und MYSQL</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta charset="utf-8" />

    <style>
    .root
    {
    background-color: #000000;
    color: #FFCF00;
    font-family: Verdana;
    font-size: 14pt;
    font-weight: bold;
    height: 20;
    padding: 5;
    margin: 5;
    }

    .child
    {
    background-color: #D1D1D1;
    color: #000000;
    font-family: Verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    height: 20;
    padding: 5;
    margin: 5;
    }

    body
    {
    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    font-weight: normal;
    }
    a
    {
    color: #000000;
    }

    .header { background: #EFEFEF; }

    .accordion { border: 1px solid #666;padding: 1px; width: 300px; }
    .accord-header { background: #EFEFEF; }
    .accord-header:hover { cursor: pointer; }
    .accord-content { display: none; }
            
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".accordion .accord-header").click(function() {
          if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
          } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
          }
        });
      });
    </script>


    </head>

    <body>

        <?PHP

        
    include "edit/config.inc.php";
        include 
    "zugriff.inc.php";

        
    // Hier entsteht das Menü, alle Datensätze auswählen
        // und nach dem Hauptmenü sortieren!


    /*
      <div class="accordion">
      <div class="accord-header">Header 1</div>
      <div class="accord-content">This is the content for the first header.</div>
      <div class="accord-header">Header 2</div>
      <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </div>
    */


        
    $submenue = array();

        
    $sql1 "select * from ".CONTENT." where ParentLevel = 0 order by id asc";
        
    $nodeResult mysql_query($sql1,$conn);
        
    $counter 0;
        
        print 
    "<div class=\"accordion\">\n";
            
        while(
    $row mysql_fetch_assoc($nodeResult))
        {
        
            
    // Hauptmenüs
            
    $id             $row['id'];
            
    $MenuName         utf8_decode($row['MenuName']);
            
    $GetAnhang         utf8_decode($row['GetAnhang']);
            
    $ParentLevel     $row['ParentLevel'];    

            
    // Untermenüs
            
    $sql2 "select * from ".CONTENT." where ParentLevel = $id";
            @
    $childResult mysql_query($sql2,$conn);
                    
            
    $Anzahl1 mysql_num_rows($childResult);
                            
            
    // Wenn es kein Untermeü gibt Hauptmenü normal anzeigen
            
    if($Anzahl1 == ""){
            
                print 
    "<div class=\"header\">$MenuName</div>\n";            
                
            } else {
            
                
    // Wenn es ein Untermeü gibt Hauptmenü als Accordion anzeigen
                
                
    print "<div class=\"accord-header\">$MenuName</div>\n";
                
                
    // Wenn es ein Untermenü gibt anzeigen
                        
                
    while($child mysql_fetch_array($childResult))
                {
                    print 
    "<div class=\"accord-content\">";        
                    print 
    "<a href=\"".$child['GetAnhang']."\">".$child['MenuName']."</a> \n ";
                    print 
    "</div>\n";
                
                }
                        
            }
                                                
        }
        
    print 
    "</div>";    
            
        
    ?>

    </body>
    </html>
    in der ruhe liegt die kraft
Lädt...
X