Hallo Leute!
Ich bin gerade dabei mir ein "Klapp Menü" Widget zu bauen. Grundsätzlich sollte bei einem Klick auf ein div das die Klasse .trigger besitzt, sich ein anders bisher verstecktes div mit der Klasse .expandable öffnen.
Zu allererst: Ich bin kein JS-Guru, ich glaube ich verstehe was der Code macht und ich glaube auch zu wissen wo das Problem liegt, aber ich hab keine Ahnung wie ich es beheben kann ;D
Nun zu meinem Problen: Mit meinem bisheriger Code funktioniert das Ein-/Ausklappen nur solange ich jede Instanz des Widgets nacheinander definiere.
<div data-type="klappMenu" ....></div>
<div data-type="klappMenu" ....></div>
<div data-type="klappMenu" ....></div>
...
Wenn ich aber versuche das Widget zu schachteln (also KlappMenu in KlappMenu) dann bekomm ich ein Problem.
<div data-type="klappMenu" ....></div>
<div data-type="klappMenu" ....>
<div data-type="klappMenu" ....></div>
</div>
...
Bei einem Klick auf den 1. Trigger öffnet sich das 1. Menü und das 2. Menü. Bei einem Klick auf den jetzt sichbaren 2. Trigger schließt sich das 1. Menü :o
Ich hab jetzt schon Stunden mit herumprobieren verbracht und ich bekomm's einfach nicht hin. :'( Meiner Meinung liegt es daran, dass in den Variablen trigger und expandable (als Array) beide Instanzen des Widgets stehen. Ich schaff es aber nicht nur die jeweils entsprechende Instanz anzusprechen.
Also falls das jemand nachstellen will :) hier eine kurze Anleitung:
<div data-type="klappMenue">
<div class="trigger green">Trigger</div>
<div class="expandable green">Opened</div>
</div>
<div data-type="klappMenue">
<div class="trigger red">Trigger 1</div>
<div class="expandable">
<div class="red">Opened 1</div>
<div data-type="klappMenue">
<div class="trigger orange">Trigger 2</div>
<div class="expandable orange">Opend 2</div>
</div>
</div>
</div>
Das angehängte Widget in den js Ordner kopieren.
Kann mir bitte jemand helfen? :)
Grüße
Wenn man .trigger immer direkt eine Ebene darunter setzt, könnte man mit der elem.wgid() den Selector besser spezifizieren.
elem.find('[data-wgid="' + elem.wgid() + '"] > .trigger');
Danke für deine schnelle Antwort.
Ich bin mir nicht sicher ob ich deine Antwort richtig verstehe.
Das Trigger div ist im o.g. Beispiel direkt unter dem Widget Aufruf.
Du meinst so, richtig?
...
me.init_attr(elem);
var id = [me.widgetname, me.area, index].join('_');
var trigger = elem.find('[data-wgid="' + elem.wgid() + '"] > .trigger');
var expandable = elem.find('.expandable');
if( !trigger.hasClass('initial-open') ) {
...
Das funktioniert leider noch nicht. Nach einem klick auf das Trigger Device öffnet das expandable div nicht mehr.
Edit:
Das trigger element wird jetzt nicht mehr gefunden, somit ist die variable trigger leer. Eigentlich sollte das aber passen. Hier der DOM:
<div data-type="klappMenue" class="" data-ready="" data-wgid="klappMenue_58bf-bcbe-40b2" data-id="klappMenue_#contentDashboard_0">
<div class="trigger green">Trigger</div>
<div class="expandable green" data-id="klappMenue_#contentDashboard_0" style="display: none;">Opened</div>
</div>
Hast du noch einen Tipp für mich? Ich glaube ich komme alleine nicht darauf woran es liegt :-[
ich hatte übersehen, dass find() innerhalb sucht. Also muss man erst eine Ebene hoch, damit der Selektor funktioniert.
var trigger = elem.parent().find('[data-wgid="' + elem.wgid() + '"] > .trigger');
var expandable = elem.parent().find('[data-wgid="' + elem.wgid() + '"] > .expandable');
Ausserdem musst du Groß/Kleinschreibung beim Widgetname stringent einhalten, im Widget-Code selbst (z.B.
var Modul_klappmenue = function () {
...
var me = $.extend(new Modul_widget(), {
widgetname: 'klappmenue',
und bei der Benutzung
<div data-type="klappmenue">
und beim Filename
Danke! So funktioniert es!
Den filename hab ich auch korrigiert!
Grüße