JavaScript Einfache Toggle Funktion gesucht

EOL15

Member
Hallo!

Ich habe mir mit HTML, BASH, jQuery und ein wenig CSS einen aufklappbaren Verzeichnisbaum zusammengeschustert. Das Ergebnis funktioniert auch so, wie ich mir das vorstelle und sieht so aus....

1629010766979.png

Beim klick auf das + Symbol wird entsprechend das passende Unterverzeichnis aufgeklappt und auch wieder zu, sobald man abermals auf das + Symbol klickt. Man sieht hier schon das Problem. Das + Symbol soll sich beim öffnen des Unterverzeichnisses in ein - Symbol verwandeln und genau das bekomm ich nicht hin. Ich habe es breits mit CSS und jQuery probiert und mir werden im Internet auch unzählige Codeschnipsel angeboten. Leider kann ich keines von diesen in mein Konstrukt implementieren. Daher frage ich mal hier in die Runde.

Ich suche demnach einen "einfachen" Toggle Wechsel, die mir beim klick auf ein <a href="#">+</a> Element aus dem + Symbol, ein - Symbol und umgekehrt zaubert.
 

Nival

-
Moderator
Ich suche demnach einen "einfachen" Toggle Wechsel, die mir beim klick auf ein <a href="#">+</a> Element aus dem + Symbol, ein - Symbol und umgekehrt zaubert.
Solange Du wirklich nur mit Schriftzeichen hantierst ist das eigentlich recht simpel, besonders, wenn Du ohnehin jQuery einsetzt. Funktionales Beispiel:
HTML:
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<a href="#">+</a>
<script>
    $(function () {
        $('a').click(function () {
            if ($(this).html() == "-")
                $(this).html("+");
            else
                $(this).html("-");
        });
    });
</script>
Die Reihenfolge, damit, falls Du mal versehentlich ein Leerzeichen mit einbaust bei dem initialen Aufbau, das nicht zu Problemen führt. Der initiale Klick wird ja immer ein aufklappen sein, also, wenn es kein - ist wird es ein + sein, bei der nächsten Runde ist es dann korrekt ohne Leerzeichen gesetzt. Der Trick hierbei ist nur, dass man bei dem Aufbau auf die Methode html() zugreifen muss um den Inhalt von <a> auszulesen.

Alternativ, besonders falls Du aus irgendwelchen Gründen mal mehr dareinpacken möchtest als + und - (beispielsweise zusätzlich ein Icon) gänge das auch simpel über Klassen. Das sähe dann beispielsweise so aus:
HTML:
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<a href="#" class="a_open">-</a>
<br>
<a href="#" class="a_closed">+</a>
<script>
    $(function () {
        $('.a_open, .a_closed').click(function () {
            if ($(this).hasClass("a_open"))
                $(this).html("+ oder sonstiger inhalt");
            else
                $(this).html("- oder sonstiger inhalt");
            $(this).toggleClass("a_open a_closed");
        });
    });
</script>
 

EOL15

Member
Sag mal, kann man dich irgendwie mieten? Du bist echt der Hammer! Läuft.

Das einzige, was ich noch einfügen musste, war eine CSS Klasse, weil ich sowas gerne immer explizit vergebe, sowie ein „no-break space“ - also ein &nbsp; vod die beiden - Zeichen, weil es mir sonst beim aufklappen die nachfolgende <ul> Liste um eins nach links verschoben hat, also so...

HTML:
<a href="#" class="a_toggle" style="text-decoration: none;">+</a>
<script>
    $(function () {
        $(".a_toggle").click(function () {
            if ($(this).html() == "&nbsp;-")
                $(this).html("+");
            else
                $(this).html("&nbsp;-");
        });
    });
</script>

Ansonsten TOP 👍 ... und eigentlich ja total einfach, wenn man ein wenig JavaScript bzw. jQuery kann.

So langsam komme ich meinem Ziel näher und du hast mir ein gutes Stück dabei geholfen. Vielen Dank.
 

Nival

-
Moderator
Sag mal, kann man dich irgendwie mieten?
Bezahlen, meinst Du? Sicher, aber dann tendenziell bei lohnenderen aka größeren Sachen 🙃

Ansich brauchst Du bei einem einzelnen(!) Leerzeichen noch kein &nbsp; - erst wenn es mehrere sind.

Ist das für den Privatgebrauch? Dann sage ich Daumen hoch und super. Wenn es für mehr gedacht ist hebt mein innerer Programmierer leise mahnend den Zeigerfinger und murmelt "aber damit das auch echt auf allen Endgeräten tauglich aussieht arbeitet man hier nicht mit Leerzeichen, sondern mit CSS!".

Typisch wäre hier eigentlich der Einsatz von z.B. https://fontawesome.com/ - in den größten Teilen kostenlos, auch kommerziell. Gezielt eingesetzt müsste hier sogar nurnoch die Klasse gewechselt werden und der Rest würde über CSS erledigt - aus diesem Gedankengang heraus entsprang auch die Verwendung von zwei Klassen, aber so wie Du es gelöst hast ist es für diesen Anwendungsfall natürlich super. Zeigt, dass Du nicht nur c&p machst, sondern auch verstehst worum es geht (y)

Jedenfalls, bevor ich Dich jetzt mit "aber eigentlich" zutexte... wie gesagt, für den Privatgebrauch ist das schon top und nicht verbesserungswürdig - und gern geschehen!
 

EOL15

Member
Vielen Dank für die Blumen. Sowas hört man natürlich gerne. Und danke nochmal für deine Hilfe. (Bezahlen wollte ich dich nämlich eigentlich nicht. War eher so eine Metapher :giggle: )

Zeigt, dass Du nicht nur c&p machst

Nennen wir es „Learning by doing“. Wenn ich auf mir unbekannte Sprachen, Codeschnipsel, Vorgehensweisen oder Regelwerke stoße, dann kopiere ich mir das erstmal alles, probiere es aus, versuche zu verstehen und beginne dann damit, es auf meine Bedürfnisse anzupassen. Damit bin ich bisher immer ganz gut gefahren.

Ist das für den Privatgebrauch?
Hm. Sagen wir mal so… ich mache das, weil ich Bock darauf habe und das ein sehr guter Ausgleich zu meinem Beruf ist. Beruflich hab ich mit all dem hier also rein gar nichts zu tun. Rein privat wäre jetzt aber auch nicht ganz richtig, da ich manche Dinge auch veröffentliche und somit das alles nicht mehr so wirklich privat ist. Um es kurz zu machen… ich bin sowas wie ein privater 3rd Party Developer mit gefährlichen Halbwissen 🤣 … einfach, weil es mir Spaß macht. Dabei vermische ich html und css mit JavaScript, jQuery und BASH. Also einem Mix aus unterschiedlichen Waffengattungen. Da stößt man als Privatperson hin und wieder schon mal an seine Genzen und sucht sich dann Hilfe in Foren wie diesem hier. Da meine Projekte i.d.R. aber unter GPL3 laufen, sehe ich das jedoch alles relativ entspannt.

Ich verwende hier übrigens bootstrap sowie die bootstrap icons als Grundlage meiner GUI. Dazu gesellt sich dann noch jQuery, von dem ich eigentlich keine Ahnung habe, es aber total klasse finde, was man damit alles anstellen kann. Zu guter letzt ist der Hauptgrund für all das aber BASH. Ich baue quasi eine Browser GUI um im Hintergrund BASH auszuführen. Bei dem o.a. Verzeichnisbaum lese ich z.B. eine Linux Ordnerstruktur aus, lasse diese anzeigen und verarbeite die übergebenen POST Variabeln aus dem Formular mit BASH weiter. Mit Perl oder Python wäre das sicherlich alles viel einfacher, aber ich kann nur das.

Soweit von mir. Wirst sicherlich noch von mir hören… also ich meine… von meinen Problemen und mir 😉
 
Zuletzt bearbeitet:

EOL15

Member
Vergessen…
Ansich brauchst Du bei einem einzelnen(!) Leerzeichen noch kein &nbsp; - erst wenn es mehrere sind…
Das weiß ich eigentlich, hat in diesem Fall aber leider nicht funktioniert. Keine Ahnung warum. Vielleicht lag es an der bootstrap Engine, die da rein gegrätscht hat. Ich weiß es nicht. Nichts desto trotz versuch ich mich an den W3C Standard zu halten und wenn mir danach ist, validiere ich meine Quellcode auch, um zu schauen, ob alles chic ist. Ich versuche dabei auch immer möglichst barrierefrei zu schreiben, was mir aber sicherlich nur ansatzweise gelingt. Aber wie meine Signatur ja bereits Trefflichkeit sagt… Der Weg ist das Ziel.
 

EOL15

Member
Erwischt! 🤫
Aber ich muss dich leider enttäuschen, denn etwas ultimatives wird es in der Form definitiv nicht mehr geben. Wenn überhaupt, dann wird es eher etwas rudimentäres, was ( ... neben meinen eigenen Fähigkeiten ...) natürlich auch DSM7 geschuldet wäre. Aber auch das liegt noch in weiter Ferne, da hier überall noch ziemlich große Steine rumliegen, die erstmal aus dem Weg geräumt werden wollen. Das, was ich hier also grade mache ist nur Zeitvertreib und schauen was geht, nur damit ich nicht aus der Übung komme. Das hat aber alles noch keine Aussagekraft und für den Moment sieht es auch nicht danach aus, das da was konkretes bei raus kommt. Aber heute ist nicht alle Tage… 😉
 
Zuletzt bearbeitet:

Zurzeit aktive Besucher

Keine Mitglieder online.

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
565
Beiträge
8.272
Mitglieder
193
Neuestes Mitglied
cekap
Oben