collapse/expand mit Sonderwünschen^^

ill66 · 05.11.2009

[gelöst] collapse/expand mit Sonderwünschen^^

Puuh, mein Schädel brummt.
Die letzten Stunden hab ich damit verbracht, einen Weg zu suchen, ein/ausklappbare Elemente für meinen Blog hinzubekommen - genaugenommen Listen-Punkte einer Sub-Liste.

google gibt mir ja auch reichlich Scripte dafür, aber da ich genau Vorstellungen hab, wie das am Ende aussehen und sich verhalten soll, gab es immer einen Haken...

Folgende Anforderungen sollen erfüllt werden:

- keine externen JS-Files
- beim Klick auf ein übergeordnete Item sollen nur dessen Unterpunkte ein/ausklappen, nicht aber die von anderen übergeordneten Items in dem selben DIV
- eine kleine Grafik, die jeweils bei Klick umschaltet (bei zugeklappter Liste ein Dreieck, das nach rechts zeigt, bei ausgeklappter eins, das nach unten zeigt)
(- je schlanker der Code, desto besser

)

Ja, ich glaub, das wars schon^^

Also das ganze wäre dann so strukturiert:

Code:

*Kateg. 1
   - Subkat. a
   - Subkat. b
   - Subkat. c
*Kateg. 2
*Kateg. 3
   - Subkat a

usw.

Ich hab von JS quasi keine Kenntnisse, HTML und CSS ist stabil.

Kann jemand helfen?

mrbuff76 · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

Hm, da wirst du wohl um JS nicht drumherum kommen...

ill66 · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

Oh, da liegt wohl ein Missverständnis vor^^
Ich weiß, dass ich dafür JS brauch, was auch in Ordnung ist, ich hab nur angemerkt, dass ich davon nicht viel Ahnung hab, damit mögliche Helfer es mir niedrigschwellig erklären

und das JS sollte halt nicht in einer externen Datei gelagert werden, sondern intern.

ChrisvA · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

Wenn du nicht so viel Javaskript haben möchtest, baue das ganze erst einmal so auf, dass du nur durch ändern der Eigenschaft visible ein Menüpunkt entweder offen ist, oder zu. Packe also die ganzen Subkategorien eines Menüpunktes in eine Div-Box zusammen.
Dann kannst du das ganze auf eine kleine Javaskriptfunktion reduzieren, die dann nur noch den visible-Parameter ändert und das Bild mit dem Plus/Minus austauscht.
Ob man das Javaskript intern hat oder einbindet, macht eigentlich keinen Unterschied. Ein Vorteil der Einbindung ist, dass man dadurch nicht an den Anfang jeder HTML-Datei das ganze Skript hängen muss, sondern eben nur eine Zeile in der steht, wo das JS-für den Browser zu finden ist.
Was hast du eigentlich gegen ein eingebundenes JS?

sokie · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

ChrisvA schrieb:
Packe also die ganzen Subkategorien eines Menüpunktes in eine Div-Box zusammen.

ist nicht unbedingt nötig. Die Unterpunkte sind ja auch nur Kinder einer Liste (zB einer <ul>) die man genauso wie ein div ein und ausblenden kann.

ill66 · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

ChrisvA schrieb:
Wenn du nicht so viel Javaskript haben möchtest, baue das ganze erst einmal so auf, dass du nur durch ändern der Eigenschaft visible ein Menüpunkt entweder offen ist, oder zu. Packe also die ganzen Subkategorien eines Menüpunktes in eine Div-Box zusammen.

Also so wie ichs bisher gebastelt hab, hab ich einen wrapper-DIV und darin dann für jede Haupt-Kategorie eine UL mit jeweils einer verschachtelten UL für die Sub-Kategorien (dürfte ja aber kein Unterschied zu deiner DIV-Variante sein, da ebenfalls Blocklevel-Elemente, oder?)

Dann kannst du das ganze auf eine kleine Javaskriptfunktion reduzieren, die dann nur noch den visible-Parameter ändert und das Bild mit dem Plus/Minus austauscht.

Nein, ich kann das leider nicht^^° Du denn vlt?

Ob man das Javaskript intern hat oder einbindet, macht eigentlich keinen Unterschied. Ein Vorteil der Einbindung ist, dass man dadurch nicht an den Anfang jeder HTML-Datei das ganze Skript hängen muss, sondern eben nur eine Zeile in der steht, wo das JS-für den Browser zu finden ist.

Ja, die Vorteile mit dem von extern Einbinden kenn ich ja aus dem CSS.
Ich hab auch ein Script gefunden, das scheint eigentlich auf meine Bedürfnisse zu passen, nur beinhaltet es halt eine externe JS, wo ich durch meine Unkenntnis nicht richtig wüsste, wie ich die korrekt zu einer internen ummodeln kann.

Was hast du eigentlich gegen ein eingebundenes JS?

Mein Blog liegt halt bei google/blogspot und da könnte ich externe Text-/Script-Dateien nur einbinden, wenn ich sie auf nem anderen Webspace lagere. Und da ich diesen Blog gerne etwas anonymer halten würde, könnte ich nicht meinen Pad-Space dazu benutzen und mit Free-Space ist das ja immer so eine Sache mit Verfügbarkeit und so.
Drum.^^

ill66 · 05.11.2009

AW: collapse/expand mit Sonderwünschen^^

OK, ich hab in einem Blog jetzt einen Link bekommen, wo genau das gezeigt wird, was ich haben will (die 2. Version, mit den mehreren Haupt-Topics).

Aber ich blick einfach nicht, was es mit diesem [ANCHORID] und [DIVID] auf sich hat! Verdammt! Und müsste nicht eigentlich diese mid-class irgendwo definiert werden?? :motz:

edit:
Puuh. Ich weiß nicht genau wie, aber ich habs geschafft durch intensive Quelltext-Schau und Experimentationen^^°

McLoude · 06.11.2009

AW: collapse/expand mit Sonderwünschen^^

Also, ich habe in einem Admin mal ne Lösung gebaut (habe ich auch damals nur irgendwo mal gelesen) die allein mit CSS funktionierte.

Hier mal Teile des Codes in der HTML-Seite:

HTML:

<ul id="menue">
  <li><a href="#" onClick="javascript:zeigen('submenue1')">Dein Hauptpunkt1</a>
    <ul id="submenue1" class="submenue">
      <li><a href="#">Dein Unterpunkt</a></li>
    </ul>
  </li>
<li><a href="#" onClick="javascript:zeigen('submenue2')">Dein Hauptpunkt2</a>
    <ul id="submenue2" class="submenue">
      <li><a href="#">Dein Unterpunkt</a></li>
    </ul>
  </li>
</ul>

In der CSS-Datei, da sind meine Angaben noch drin:

Code:

ul#menue li a + ul.submenue
{
 display: none;
}
ul#menue li a:focus + ul.submenue 
{
 display: block;
}
ul, li 
{
     margin: 0;
     padding: 0;
     list-style-type: none;
}
ul#menue {
     width: 100%;
     margin: 0 0 0 0;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold ;
     
}
ul#menue li a 
{
     margin: 2px 8px 2px;
     height: 20px;
     line-height: 25px;
     text-align: left;
     display: block;
     text-decoration: none;
     color: #666666
     
}
ul#menue li a + ul.submenue
{
     display: none;
}

ul#menue li a:focus + ul.submenue 
{
     display: block;
}
ul.submenue
{
     margin: 0px 0px;
     font-weight:normal ;
}

Und dann halt leider nochmal ein JavaScript, da der IE6 (bei den neuen weiß ich nicht) diese CSS-Eigenschaften nicht versteht, den packste in den Headbereich:

Code:

<script language="JavaScript" type="text/javascript">
window.onload=zeigen;

function zeigen(id) 
{
 for (var i = 1; i<=100; i++) 
 {
    if (document.getElementById("submenue"+i)) 
    {
        document.getElementById("submenue"+i).style.display="none";
    }
 }
 if (document.getElementById(id)) 
 {
     document.getElementById(id).style.display="block";
 }

}
</script>

Also bei mir funzt das bestens. Da ist halt nur jetzt kein Plus-Minus bei. Ich will es nur mal geposted haben, dass es auch (fast) ohne JS geht ;-)