Benjamin: Logikproblem mit JavaScript

Hallo ihrs.

So langsam zweifle ich an meinem Verstand.

Für meine neue private Homepage hab ich mir ein Design, ähnlich dem Stammbaum, gebastelt. Jetzt möchte ich als Spielerei einzelne Äste mit JavaScript ausblenden lassen können. Hierzu wechsle ich einfach mit ...".style.visibility=hidden/visible" die visibility von bestimmten Ästen.

Hier kann man sichs anschauen: http://galgenpracht.de/sirbenjamin/
Das Ganze wurde so aufgabeut, dass "root" + "person" + "portfolio" in verschiedenen Ebenen liegen.
(Quelltext anschauen um JavaScript zu sehen)

Nur hab ich dabei ein Logikproblem: Bei jedem Aufruf wird das kleine Icon mit dem +/- gegen das jeweilige andere ausgetauscht. Lasse ich allerdings, mit einem Klick auf das minus neben Gestalt, den ganzen Gestaltast ausblenden und anschließend wieder einblenden, zeigt das Icon neben Portfolio kein "+" sondern ein "-".

Das ganze ist recht schweirig zu erklären. Surft mal die Seite an und probiert sie durch.

Ich hoffe sehr dass ihr mir helfen könnt.

MfG
Benjamin

  1. Hallo Benjamin

    auf mich wirkt das meiste richtig, nur im mittleren Ast 2. Ebene ist das Icon falsch gesetzt. Da ausgklappt müsste hier ein Minus sein.

    Hat Du mal ausprobiert je nach ein und ausgeklappten Zustand das "Stapelbild" durch ein "flaches" Bild zu ersetzen ?

    Dann wird es noch deutlicher.

    Liebe Grüße

    Bernd

  2. Bei jedem Aufruf wird das kleine Icon mit dem +/- gegen das jeweilige andere ausgetauscht. Lasse ich allerdings, mit einem Klick auf das minus neben Gestalt, den ganzen Gestaltast ausblenden und anschließend wieder einblenden, zeigt das Icon neben Portfolio kein "+" sondern ein "-".

    Weil du es nicht geändert hast. Oder anders rum: Weil du dir die eingeklappte Struktur nicht merkst. Klappe ich 'Gestalt' mit geöffnetem 'Portfolio' zu und wieder auf, ist 'Portfolio' geschlossen, die Grafik suggeriert mir aber, dass es noch geöffnet ist. Klappe ich 'Portfolio' vorher zu, ist alles in Ordnung.

    Für das Merken der Struktur könntest du dir ein Objekt anlegen, in dem du bei jeder Änderung eines Menüpunktes, der Untermenüs hat, eine Momentaufnahme speicherst und diese abfragst und ggf. wieder herstellst.

    Also in etwa so:

    var menutree = { menu1 : { hasChildren : true,  
                               children    : ['child1', 'child2', 'child3'] },  
                     menu2 : { hasChildren : false }  
                   };  
    for ( var menu in menutree ) {  
      if(menutree[menu].hasChildren)  
        alert(menu + ' has children ' + menutree[menu].children);  
      else  
        alert(menu + ' has no children');  
    }
    

    Als Denkanstoß :)

    Siechfred

    --
    Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
    1. Hui, da blick ich nicht wirklich durch. Wenn du Lust hast würde es mich freuen wenn du das ein bischen näher ausführen könntest.

      Ich dank dir schonmla im Vorraus. ;)

      MfG Benjamin

      1. Wenn du Lust hast würde es mich freuen wenn du das ein bischen näher ausführen könntest.

        Ich kopiere das nochmal rein:

        var menutree = { menu1 : { hasChildren : true,  
                                   children    : ['child1', 'child2', 'child3'] },  
                         menu2 : { hasChildren : false }  
                       };
        

        Im Objekt 'menutree' ist deine Menüstruktur gespeichert, für jeden Punkt der obersten Ebene gibt es einen Eintrag (menu1, menu2). Die Eigenschaft 'hasChildren' sagt aus, ob der Menüeintrag Untermenüs hat, falls ja, findet man die Namen der Untermenüs als Array in der Eigenschaft 'children'. Die von mir verwendete Schreibweise nennt man Object-Literal, siehe hierzu auch die Ausführungen zu JSON. Das Objekt kannst du natürlich noch beliebig erweitern, Anhaltspunkte dafür findest du in den o.g. Quellen. Selbstverständlich kannst du die Einträge manipulieren, z.B. könntest du den Kindern eine Eigenschaft 'isOpen' verpassen, die du beim Auf- und Zuklappen ptüfen oder ändern kannst.

        for ( var menu in menutree ) {  
          if(menutree[menu].hasChildren)  
            alert(menu + ' has children ' + menutree[menu].children);  
          else  
            alert(menu + ' has no children');  
        }
        

        Diese for..in-Schleife geht das Objekt 'menutree' Eintrag für Eintrag durch, indem sie sich in 'menu' die einzelnen Einträge der ersten Ebene holt, deren Eigenschaft 'hasChildren' prüft und im Erfolgsfall die Namen der Kinder ausgibt. Im Misserfolgsfall kommt die Meldung, dass der aktuelle Eintrag keine Kinder hat.

        Einen ähnlichen Ansatz findest du übrigens in diesem Feature-Artikel:
        http://aktuell.de.selfhtml.org/artikel/dhtml/treemenu/

        Siechfred

        --
        Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
        1. Hello out there!

          Die Eigenschaft 'hasChildren' sagt aus, ob der Menüeintrag Untermenüs hat, falls ja, findet man die Namen der Untermenüs als Array in der Eigenschaft 'children'.

          Das ist redundant: Die Eigenschaft 'hasChildren' ist überflüssig, da schon das (Nicht-)Vorhandensein des Arrays aussagt, ob Kinder vorhanden sind; siehe Mathias’ Posting.

          See ya up the road,
          Gunnar

          --
          „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    2. Hallo Siechfred.

      Also in etwa so:

      var menutree = { menu1 : { hasChildren : true,

      children    : ['child1', 'child2', 'child3'] },
                       menu2 : { hasChildren : false }
                     };
      for ( var menu in menutree ) {
        if(menutree[menu].hasChildren)
          alert(menu + ' has children ' + menutree[menu].children);
        else
          alert(menu + ' has no children');
      }

        
      Kürzer:  
        
      ~~~javascript
      var menutree = { menu1 : ['child1', 'child2', 'child3'],  
                       menu2 : null  
                     };  
      for ( var menu in menutree ) {  
        if(menutree[menu])  
          alert(menu + ' has children ' + menutree[menu]);  
        else  
          alert(menu + ' has no children');  
      }
      

      Einen schönen Mittwoch noch.

      Gruß, Mathias

      --
      ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
      debian/rules