jQuery toggle

[THE_fan]

Hallo zusammen,

bin gerade dabei, mir einen Adminbereich für meine Website zu basteln.
Dabei bin ich auf die doch feine Art gestoßen, Divs bzw. Listen mit Hilfe von jQuery einzublenden.

Nun stellt sich mir allerdings die Frage, ob das so gescheit ist, wie ich das angestellt habe oder ob es einfacher geht.

      <ul id="navigation">
        <li id="system">System</li>
          <ul id="system-sub" class="navigationSub">
            <li>Allgemein</li>
            <li>Benutzer</li>
          </ul>
        <script>
          $("#system").click(function () {
          $("#system-sub").toggle("normal");
          });
        </script>
        <li id="contents">Inhalte</li>
          <ul id="contents-sub" class="navigationSub">
            <li><a href="#">Berichte</a></li>
            <li>Neuigkeiten</li>
            <li>Termine</li>
            <li>Seiten</li>
            <li>Intern</li>
          </ul>
        <script>
          $("#contents").click(function () {
          $("#contents-sub").toggle("normal");
          });    
        </script>
        <li id="design">Darstellung</li>
          <ul id="design-sub" class="navigationSub">
            <li>Seiteninfo</li>
            <li>CSS</li>
          </ul>
        <script>
          $("#design").click(function () {
          $("#design-sub").toggle("normal");
          });    
        </script>
      </ul>

Kann man das irgendwie vereinfachen?
Bspw. so, dass ich die ID den angeklickten Listenelements in einer Variablen speichere und diese dann das Script auslöst? Wenn ihr wisst was ich meine..

Danke vorab!

//edit 1
Um das noch mal zu verdeutlichen was ich benötige:

Ich brauche eine Funtion, die mir quasi (vom Gedankengang her) so aussieht:

<script>
var navID = getElementById(li);
$($navID).click(function () {
$("#".$navID."-sub").toggle("normal");
});
</script>

//edit 2
Habe nun ein wenig die Dokumentation gelesen und versucht, es über den Index zu lösen.

Hier das Script

          <script>
            $('#suber').click(function () {
            var navID = $('#suber').index(this);
            $("#" + navID + "-suber").toggle("normal");
            });
          </script>

Und hier mein HTML

        <li id="suber">System</li>
          <ul id="0-suber" class="navigationSub">
            <li>Allgemein</li>
            <li>Benutzer</li>
          </ul>
        <li id="suber">Inhalte</li>
          <ul id="1-suber" class="navigationSub">
            <li>Berichte</li>
            <li>Neuigkeiten</li>
            <li>Termine</li>
            <li>Seiten</li>
            <li>Intern</li>
          </ul>

Funktioniert leider nur beim ersten genau.
Wenn ich mir die Variablen ausgeben lasse (was auch nur bei "System" funktioniert) kommt:

0[object Object]

Damit kann ich leider nichts anfangen.

//edit 3

Habe es nun hinbekommen.

<script>
  $('li').click(function () {
    var navID = $(this).attr("class");
    $("#" + navID + "-1").toggle("fast");
  });
</script>

Jetzt werden alle Listenelemente ausgelesen, allerdings nur diese verwendet, welche eine Klasse angegeben haben.

      <ul id="navigation">
        <li id="subNav" class="system">System</li>
          <ul id="system-1" class="navigationSub">
            <li>Allgemein</li>
            <li>Benutzer</li>
          </ul>
        <li id="subNav" class="content">Inhalte</li> <!-- #contents -->
          <ul id="content-1" class="navigationSub">
            <li>Berichte</li>
            <li>Neuigkeiten</li>
            <li>Termine</li>
            <li>Seiten</li>
            <li>Intern</li>
          </ul>
        <li id="subNav" class="design">Darstellung</li>
          <ul id="design-1" class="navigationSub">
            <li>Seiteninfo</li>
            <li>CSS</li>
          </ul>
      </ul>

Bitte gebt mir bescheid, wenn man das noch anders und vorallem eleganter lösen kann.

Danke!

 

[Körnerbrötchen]

Schau mal, wie ich es auf der Website eines Kunden gemacht habe: Young-Drive - Die Fahrschule in Euskirchen • Fahrschulwechsel

 

[THE_fan]

Moin!

Habe es nun so gelöst:

$(document).ready(function() {
  $('li').click(function () {
    var navID = $(this).attr("id");
    $("ul").siblings(".navigationSub").hide();
    $("#" + navID + "-1").slideToggle("normal");
    if($(this).attr("id") == navID){
      $("ul").siblings(".menuClose").removeClass("menuActive");
      $(this).toggleClass("menuActive");
    }
  });
});