Link autom. collapsible Inhalte anzeigen

Sempervivum

Well-Known Member
c-b Experte
#21
So funktioniert es im IE11:
Javascript:
        btn = document.querySelectorAll(".dropdown-btn");
        //btn.forEach((h)=>{
        for (var i = 0; i < btn.length; i++) {
            let h = btn[i];
            let ne = h.nextElementSibling;
            let btna = ne.querySelectorAll("a");
            h.addEventListener('click', function (e) {
                ne.style.display = ne.style.display == 'block' ? 'none' : 'block';
                //      btna.forEach((x)=>{
            });
            for (var j = 0; j < btna.length; j++) {
                let x = btna[j];
                x.addEventListener('click', function (e) {
                    colab = this.getAttribute('href');
                    y = document.querySelector(colab + ' .content');
                    document.getElementById('deinwunsch').style.display = 'block';
                    document.getElementById('textfeld').innerHTML = y.innerHTML;
                    y.style.display = y.style.display == 'block' ? 'none' : 'block';
                });
            };
        };
        var coll = document.querySelectorAll(".collapsible");
        //coll.forEach((g)=>{
        for (var k = 0; k < coll.length; k++) {
            let g = coll[k];
            g.addEventListener('click', function (e) {
                gv = g.nextElementSibling;
                gv.style.display = gv.style.display == 'block' ? 'none' : 'block';
            });
        };
        wunsch = document.getElementById('deinwunsch');
        closebtn = document.getElementById('closebtn');
        closebtn.addEventListener('click', function (e) {
            deinwunsch.style.display = 'none';
        });
Da war noch in anderer Hinsicht der Wurm drin: Die Eventlistener für die zweite Stufe wurden beim Klick auf die Buttons der ersten immer wieder neu registriert.
 

basti1012

Well-Known Member
#22
Ich habe mal nee Frage , die so allgemein zu den Javascript Code.
An den TE, übernimm bitte das Script aus #21 , damit du jetzt nicht durcheinander kommst.

Also Original Code nehmen wir den Teil
Javascript:
var coll = document.querySelectorAll(".collapsible");
coll.forEach((g)=>{
      g.addEventListener('click', function(e) {
            gv=g.nextElementSibling;
            gv.style.display = gv.style.display == 'block' ? 'none' : 'block';
      });
 });
Änderung 1
Javascript:
var coll = document.querySelectorAll(".collapsible");
        for (var k = 0; k < coll.length; k++) {
            let g = coll[k];
            g.addEventListener('click', function (e) {
                gv = g.nextElementSibling;
                gv.style.display = gv.style.display == 'block' ? 'none' : 'block';
            });
        };
Ich hätte es so geändert
Javascript:
var coll = document.querySelectorAll(".collapsible");
coll.forEach(function(g){
      g.addEventListener('click', function(e) {
            gv=g.nextElementSibling;
            gv.style.display = gv.style.display == 'block' ? 'none' : 'block';
      });
 });
Gibt es bei den geänderten Versionen irgendein vor oder nachteil ?
Das Ergebniss scheint das gleiche zu sein , oder habe ich da was übersehen ?


Da war noch in anderer Hinsicht der Wurm drin: Die Eventlistener für die zweite Stufe wurden beim Klick auf die Buttons der ersten immer wieder neu registriert.
Jetzt habe ich es auch gesehen . Kann man das eigentlich irgendwo in der Konsole sehen ?
Ich meine das mal gelesen zu haben , doch ich konnte es bis jetzt noch nicht finden.
 

Sempervivum

Well-Known Member
c-b Experte
#23
Kann man das eigentlich irgendwo in der Konsole sehen ?
Ich wüsste nicht wie. Hatte es zuerst mit dem Debugger bemerkt und dann ein console.log eingebaut, dann sieht man es.

Und zu den drei Varianten: Bei der dritten bleibt noch das forEach, das im IE für eine Nodelist nicht funktioniert. Alternativ kann man auch die Nodelist in ein Array umwandeln, aber darin erkenne ich keinen Vorteil.
 
Zuletzt bearbeitet:

basti1012

Well-Known Member
#24
Jetzt verstehe ich es auch besser.
Ich dachte immer das der IE gerade mit der ((x)=> Variante ein problem hatte.
Irgendwo konnte man das mit function() austauschen.
Wenn bei der Variante das forEach vom IE nicht verstanden wird bleibt ja nur die normale for Schleife.

Immer dieser IE , warum wird der eigentlch noch genutzt ? Bleibe lieber bei meinen opera und chrom:)
 

basti1012

Well-Known Member
#26
Es wäre gut wenn du mal deine aktuelle Version zeigen kannst . Mit Link oder du machst ein Codepen fertig.
Deine Version solte ja mitlerweile anders aussehen als wie das Beispiel hier.
Ich konnte dein Problem auch gerade nicht nachstellen.
Wenn du ein Beispiel fertig hast , dann sag auch dazu was man genau drücken muß wo der Fehler am besten Sichtbar ist
 

basti1012

Well-Known Member
#28
Meinst du das so ?
https://codepen.io/basti1012/pen/oNvmGGP
Also wenn man in links in der Navi klickt geht nur das auf was man angeklickt hat und alle anderen zu.

Mit den text der unter den header verschwindet ist eigentlich logisch. Die Sprungmarken springen immer am anfang der Seite oder so in der art. Wenn du die Pixel vom Header und Padding dazu rechnest stimmt die Höhe wieder.

Komischerweise klappt das nur mit einen SetTimeout wie ich das gedacht habe.
Ich habe es zwar hin bekommen , aber zufrieden bin ich eigentlich nicht weil das sonst auch immer klappte.Irgendwie überschreibt das Javascript mein vorhaben. Deshalb der Timeout und es klappt zumindest halbwegs

Vieleicht kann da mal einer rein kucken und ne Idee im Raum schmeißen warum das nicht so richtig geht. Oder vieleicht nee bessere Lösung finden .
 

basti1012

Well-Known Member
#30
Ich bin gerade verwirrt.
Was geht den im IE nicht ?
Die forEach Schleifen wurden ja schon auf Ie angepaßt und weiter IE Probleme kenne ich gerade nicht .
Hast du denn aktuellen IE ? Ich muß den mal selbe starten und kucken . Hat der eigentlich auch nee Konsole ?
Wahrscheinlich nicht . Aber ich kucke mal .

Vieleicht weiß auch gerade wer anders was mit den IE hier los ist oder was ich übersehen habe
 

Sempervivum

Well-Known Member
c-b Experte
#31
Hat der eigentlich auch nee Konsole ?
Doch, hat er, und HTML-Inspektor und Debugger auch. Die Entwicklerwerkzeuge sind ähnlich wie bei anderen Browsern. Allerdings unterstützt Codepen den IE nicht mehr. Da ist von einem Debug- Modus die Rede für ältere Browser aber da wollte ich jetzt nicht einsteigen.
 
Oben