JavaScript: Ansprechen von Elementen

rincewind

Hallo.

Ich bastel gerade an einer JavaScript-Bibliothek für eine Homepage. In dieser Bibliothek soll es unter anderem Funktionen für eine dynamische Navigationsleiste geben. Aufgrund der Strukturierung der Seite haben wir beschlossen, die Navigationsleiste wie folgt zu strukturieren:

Code

<dl>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
  <dt>Sektion</dt>
  <dd>
    <ul>
      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

      [*]Unterkapitel
      <ul>
        [*]Link
        [*]Link
        [*]Link
        [*]Link
        [*]Link
      [/list]

    [/list]
  </dd>
</dl>

Alles anzeigen

Okay. Folgende Gedanken stecken dahinter:

Das Ganze soll in einer Leiste am linken Rand des Bildschirms angezeigt werden. Die Inhalte der dt-Tags geben Sektionen an, die Inhalte der dd-Tags Untersektionen/-kapitel und die Links innerhalb der Liste die Verweise zu Unteruntersektionen/-Kapitel. D.h., die gesamte Homepage ist - vorerst - auf drei Ebenen aufgebaut:

Code

1. Sektion 1
1. 1. Unterkapitel 1 von Sektion 1
1. 1. 1. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
1. 1. 2. Unterkapitel 2 von Unterkapitel 1 von Sektion 1
1. 2. Unterkapitel 2 von Sektion 1
2. Sektion 2
2. 1. Unterkapitel 1 von Sektion 1
2. 1. 2. Unterkapitel 1 von Unterkapitel 1 von Sektion 1
usw.

Die Sektionen werden links angezeigt, wenn man auf den Titel einer Sektion klickt, sollen darunter die Untersektionen zum Vorschein kommen, wenn ich den Zeiger über den Link zu einem Unterkapitel fahre, kommen daneben die Links zu den Unteruntersektionen zum Vorschein. Zweiteres ist kein Problem, da es ein ganz normales, simples JS-CSS-hybrides DropDown-Menu ist. Der erste Teil bereitet mir Schwierigkeiten...

Mein Problem ist, dass ich die dd's nicht vernüftig ansprechen kann. Kann mir jemand hierbei helfen?

(Wenn meine Erklärungen nicht verständlich genug waren, kann ich gerne ein paar meiner Skizzen posten...)

MfG,
rincewind

No0ob

Wo hast du denn die <dd> definiert?

rincewind

definitions-liste:

dl - eröffnet die liste
dt - /dt - Definitionsterm
dd - /dd - Derfinitonsbeschreibung

so ist auch meine liste strukturiert

GreenRover

dazu müsstest du z.b. auf das <dd> ein on moue over machen und dann per this.parentNote das ul abgreifen und auf display: inline legen ansonsten halt auf display: none...

die einfache mehtode währe es mittels id`s auf allen teilen...

Aber dein problem würd wohl das onMouse over sein, da wenn ich recht verstehe, du nur dne obrigen ocde haben möchtest oder ?!

dann wird es lustiger.. man nehme sich ein div und ein js scipt.

wobei das js script alles in eien array phrast und dann neu strukturiert mit inner html schreibt.

aber das wird noch ein lustig spiel werden.

rincewind

Ziel ist, das Ganze "unobtrusive" zu machen, dh mit einem Markup ohne zusätzliche eventhandler, ids oder divs und ähnliches...

GreenRover

ja du brauchst aber ien anhaltpunkt, der imemr nur einmal vorhanden ist...

wenn das auf das dl zutrifft, ist es gut. Dann ist jetzt ein problem wo ?!
das ganze zu phrasen und mit js neu generieren zulassen (mit event handlern) ?! da du ohne handler ja nicht auskommst.

und googel siht ja die genrierewn ja nicht, da er kein js hat...

rincewind

Code

<dl id="navi">
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
  <dt>klick me</dt>
  <dd>more stuff</dd>
</dl>


<script type="text/javascript">
<!--
function prepareNav(sID){
  var nav=document.getElementById(sID);
  if(!nav)return;
  var child=nav.firstChild;
  while(child){
    if(child.nodeName=="DT"){
      child.onmousedown=function(){
        var sibling=this.nextSibling;
        while(sibling.nodeName!="DD")
          sibling=sibling.nextSibling;
        if(sibling.style.display=="block")
          sibling.style.display="none";
        else sibling.style.display="block";
      }
    }
    if(child.nodeName=="DD")child.style.display="none";
    if(child.nextSibling)child=child.nextSibling;
    else child=null;
  }  
}
prepareNav("navi");
//-->
</script>

Alles anzeigen

der vorschlag von nem freund/bekannten von mir... =)