Benötige JS-Hilfe bei eigenem "klappMenu" Widget

[fhainz]

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 

Nun zu meinem Problen: Mit meinem bisheriger Code funktioniert das Ein-/Ausklappen nur solange ich jede Instanz des Widgets nacheinander definiere. 

Code Auswählen Erweitern


<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.

Code Auswählen Erweitern


<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ü 

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:

Code Auswählen Erweitern


<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

[setstate]

Wenn man .trigger immer direkt eine Ebene darunter setzt, könnte man mit der elem.wgid() den Selector besser spezifizieren.

Code Auswählen Erweitern


elem.find('[data-wgid="' + elem.wgid() + '"] > .trigger');
       


[fhainz]

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?

Code Auswählen Erweitern


...
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:

Code Auswählen Erweitern

<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>

[fhainz]

Hast du noch einen Tipp für mich? Ich glaube ich komme alleine nicht darauf woran es liegt 

[setstate]

ich hatte übersehen, dass find() innerhalb sucht. Also muss man erst eine Ebene hoch, damit der Selektor funktioniert.

Code Auswählen Erweitern


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.

Code Auswählen Erweitern


var Modul_klappmenue = function () {
...
    var me = $.extend(new Modul_widget(), {
        widgetname: 'klappmenue',


und bei der Benutzung

Code Auswählen Erweitern


<div data-type="klappmenue">


und beim Filename

[fhainz]

Danke! So funktioniert es!
Den filename hab ich auch korrigiert!

Grüße