Die meisten elektronischen Zeitschriften von Suoyi verwenden Baumverzeichnisse. Wenn Sie mit der Maus auf das Hauptverzeichnis klicken, werden die Unterverzeichnisse erweitert. Es wirkt einfach, lebendig und unprätentiös.
Es gibt viele Möglichkeiten, ein solches baumartiges Verzeichnis zu erstellen. Kürzlich habe ich mir zum ersten Mal das folgende Beispiel angesehen: Wenn Sie mit der Maus auf das Hauptverzeichnis klicken, wird das entsprechende Unterverzeichnis nach unten gezogen Wenn Sie erneut klicken, kehrt es in seinen ursprünglichen Zustand zurück. Der Effekt ist genau der gleiche wie der Katalogeffekt im elektronischen Magazin Soyi.
Produktionsmethode:
Ich kopiere zuerst den Code, der diesen Effekt erzeugt, wie folgt und kombiniere dann den Code, um die Produktionsmethode zu erklären:
〈div id="main1" style= "color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ Hauptverzeichnis 1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- Unterverzeichnis 1〈/a〉 〈br〉
〈 a href="#"〉- Unterverzeichnis 2〈/a〉 〈br〉
〈a href="#"〉- Unterverzeichnis 3〈/a〉 〈br〉
〈a href="# " 〉- Unterverzeichnis 4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all .child2.style.display ==''none'')?'''':''none''" 〉
+ Hauptverzeichnis 2 〈/div〉
〈div id="child2" style= "display:none"〉
〈a href="#"〉- Unterverzeichnis 1〈/a〉 〈br〉
〈a href="#"〉- Unterverzeichnis 2〈/a〉 〈br〉
〈a href="#"〉- Unterverzeichnis 3〈/a〉
〈/div〉
Hinweis: „ " stellt einen Zeichenraum dar
1. Definieren Sie zunächst zwei DIVs, eines mit Für das Hauptverzeichnis , nennen Sie es: main1; für das andere für das entsprechende Unterverzeichnis, nennen Sie es: child1. 2. Schreiben Sie „+ Main Directory 1“ in das DIV von main1 und laden Sie ein Mausklick-Ereignis darauf: onclick und ein kleines Javascript-Programm: document.all.child1.style.display= (document.all. child1.style. display ==''none'')?'''':''none''. Die Funktion dieses Programms besteht darin, dass beim Klicken mit der Maus auf den DIV von main1 (dh auf „+ Hauptverzeichnis 1“) der DIV von child1 angezeigt wird, wenn er ausgeblendet ist versteckt. .
3. Schreiben Sie ein Unterverzeichnis auf das DIV von child1 und legen Sie es als Hyperlink fest. In der tatsächlichen Produktion habe ich es in einen echten Link geändert, sodass es auf den Link verweist. Ziel. Fügen Sie der DIV-Definition von child1 ein CSS: style="display:none" hinzu. Der Zweck besteht darin, das Unterverzeichnis am Anfang auszublenden.
Um weitere Verzeichnisse zu erstellen, wiederholen Sie einfach die oben genannten drei Schritte. Drücken Sie F12, um den Effekt zu sehen. Diese Methode verwendet hauptsächlich das Anzeigeattribut von CSS: display. Eines ihrer Merkmale besteht darin, dass beim Ausblenden des Objekts automatisch der vom Objekt belegte Seitenbereich aufgegeben wird. Wir wissen, dass CSS noch eine weitere Eigenschaft hat: Sichtbarkeit hat auch die Funktion, Objekte ein- und auszublenden, kann aber nicht zum Erstellen des oben stehenden baumartigen Verzeichnisses verwendet werden. Denn nachdem Visibility das Objekt ausgeblendet hat, wird der vom Objekt belegte Speicherplatz nicht freigegeben. Das heißt, wenn das Unterverzeichnis ausgeblendet ist, ist der Speicherort des Unterverzeichnisses nur leer und die Position wird nicht freigegeben, sodass kein anderes Hauptverzeichnis näher verschoben werden kann. Daher kann es nur dort verwendet werden, wo die Position von Seitenelementen fixiert werden muss.
