Unterschiedliche wraps anhand des parent Status?

djo193 · 22. August 2013 11:12

Hallo Leute,

ich seit eineinhalb Tagen auf der Suche nach einer Lösung für mein Problem, aber ich stehe völlig auf dem Schlauch. Ich habe ein Menü angelegt, dessen zweite Ebene beim hover ausklappt. Das funktioniert soweit auch alles super. Allerdings möchte ich gerne, dass der parent Menüpunkt meine hover-Klasse (linkItemActive) behält, wenn ich mit der Maus durch das Dropdown-Menü wandere. Hierfür habe ich mir eine kleine JS-Funktion geschrieben, welche mir die Klasse des parent Menüpunktes ändert, sobald ich mit der Maus in das Dropdown gehe und sie wieder zurückändert (linkItem), wenn ich das Menü verlasse. Soweit kein Problem. Allerdings habe ich nun das Problem, dass wenn ich das Dropdown des aktiven parent Menüpunktes, welcher bereits sowieso die Klasse "linkItemActive" hat (und diese auch behalten soll), verlasse, meine JS-Funktion mir die Klasse ebenfalls auf "link-item" ändert.

Mein Ansatz, um das Problem zu lösen, war es je nach Status (NO, ACT, CUR...) des parent Menüpunktes, das onmouseover/onmouseout gar nicht erst mit in meinen <ul>-Tag zu schreiben. Gibt es irgendeine Möglichkeit auf den aktuellen Status des parents zuzugreifen und in Abhängigkeit dessen dann den wrap zu definieren?

Hier der TS-Schnipsel der 2. Menüebene:

  # zweites Level
  2 = TMENU
  2 {
    stdWrap.dataWrap = <ul onmouseover="changeClass('mainmenu_{field : pid}', 'linkItemActive');" onmouseout="changeClass('mainmenu_{field : pid}', 'linkItem');">|</ul>
    NO.allWrap = <li>|</li>
    NO.ATagParams = class="dropdown"
  }

Ich hoffe es ist einigermaßen klar geworden, wo mein Problem ist 😃

djo193 · 22. August 2013 12:04 · Beste Antwort

Ok, kaum stelle ich hier die Frage, schon finde ich selbst die Lösung 🙂 Habe es jetzt etwas anders gelöst. Und zwar übergebe ich der JS-Funktion mittels {leveluid : 1} die ID des aktiven parent Menüpunktes und führe den Code nur aus, wenn dieser nicht mit der aktuellen ID übereinstimmt.

stdWrap.dataWrap = <ul onmouseover="changeClass('mainmenu_{field : pid}', 'linkItemActive', 'mainmenu_{leveluid : 1}');" onmouseout="changeClass('mainmenu_{field : pid}', 'linkItem', 'mainmenu_{leveluid : 1}');">|</ul>

NO.allWrap = <li>|</li>
NO.ATagParams = class="dropdown"

function changeClass(id, newClass, parentId)
{
    if (id != parentId)
    {
        document.getElementById(id).className = newClass;
    }
}