Immer nur ein Button offen

L

Loddar1

Erfahrenes Mitglied
Hallo liebe Gemeinde ich habe keine Ahnung von JavaScript und komme nicht weiter
Ich habe eine Pagination ähnlich wie hier über die 3 Punkte kommt man zu gehe zu Seite mit einem Klick öffnet sich ein Dialogfeld wenn ich 2 mal drei Punkte sehe und die linken 3 Punkte anklicke öffnet sich ein Dialogfeld, wenn ich jetzt auf die rechten 3 Punkte klicke schliesst sich das Linke Dialogfeld und das rechte Dialogfeld öffnet sich.

Hier bei euch geht das alles mit Ajax glaube ich
Ich habe einen eventHaendler

<button id="leftButton">...</button>
Javascript: 
document.getElementById('leftButton').addEventListener('click', function() {
var leftButton = this;
var leftList = document.getElementById('leftList');
var isExpandede = leftButton.getAttribute('expandede') === 'true';
leftButton.setAttribute('expandede', String(!isExpandede));
leftList.setAttribute('expandede', String(!isExpandede));
leftList.style.display = isExpandede ? 'none' : 'block';
});
Das gleiche nochmal für rightButton

Wie kann ich es erreichen das wenn ein Dialogfeld offen ist und der andere Button geklickt wird das sich das erste Dialogfeld schliesst?

Danke für eure eventuelle Hilfe
 
Ich habe eine Pagination ähnlich wie hier über die 3 Punkte kommt man zu gehe zu Seite mit einem Klick öffnet sich ein Dialogfeld wenn ich 2 mal drei Punkte sehe und die linken 3 Punkte anklicke öffnet sich ein Dialogfeld, wenn ich jetzt auf die rechten 3 Punkte klicke schliesst sich das Linke Dialogfeld und das rechte Dialogfeld öffnet sich.
Zum Vergrößern anklicken....
Das verstehe ich nicht. Mit "wie hier", meinst Du damit "hier im Forum"? Wenn Du auch das HTML dazu posten würdest, würde es das Verständnis sicher erleichtern.
 
PS: Nachdem ich das noch Mal genau gelesen habe, verstehe ich jetzt, was Du vor hast.
Statt mit einem benutzerdefinierten Attribut löst man das besser mit einer Klasse:
Code: 
<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>Expand Lists</title>

    <style>
        .the-list:not(.expanded) {
            display: none;
        }
    </style>

</head>

<body>
    <button id="leftButton" class="btn-for-list" data-id-list="leftList">Linke Liste</button>
    <button id="rightButton" class="btn-for-list" data-id-list="rightList">Rechte Liste</button>
    <div id="leftList" class="the-list">Hier die linke Liste</div>
    <div id="rightList" class="the-list">Hier die rechte Liste</div>
    <script>
        // Eventlistener für Klick auf das Dokument registrieren:
        document.addEventListener('click', event => {
            // Wurde ein Button für eine Liste geklickt?
            if (event.target.classList.contains('btn-for-list')) {
                const
                    // Expandierte Liste bereit stellen:
                    expandedList = document.querySelector('.the-list.expanded'),
                    // Dem Button zugeordnete Liste bereit stellen:
                    assignedList = document.getElementById(event.target.dataset.idList);
                // Ist eine Liste offen, schließen wir diese:
                if (expandedList) {
                    expandedList.classList.remove('expanded');
                }
                // Die Liste, die dem Button zugeordnet ist, öffnen:
                assignedList.classList.add('expanded');
            }
        });
    </script>
</body>

</html>
Das würde auch mit n Buttons und Listen funktionieren.
 
Loddar1 hat gesagt.:
Hallo liebe Gemeinde ich habe keine Ahnung von JavaScript und komme nicht weiter
Ich habe eine Pagination ähnlich wie hier über die 3 Punkte kommt man zu gehe zu Seite mit einem Klick öffnet sich ein Dialogfeld wenn ich 2 mal drei Punkte sehe und die linken 3 Punkte anklicke öffnet sich ein Dialogfeld, wenn ich jetzt auf die rechten 3 Punkte klicke schliesst sich das Linke Dialogfeld und das rechte Dialogfeld öffnet sich.

Hier bei euch geht das alles mit Ajax glaube ich
Ich habe einen eventHaendler

<button id="leftButton">...</button>
Javascript: 
document.getElementById('leftButton').addEventListener('click', function() {
var leftButton = this;
var leftList = document.getElementById('leftList');
var isExpandede = leftButton.getAttribute('expandede') === 'true';
leftButton.setAttribute('expandede', String(!isExpandede));
leftList.setAttribute('expandede', String(!isExpandede));
leftList.style.display = isExpandede ? 'none' : 'block';
});
Das gleiche nochmal für rightButton

Wie kann ich es erreichen das wenn ein Dialogfeld offen ist und der andere Button geklickt wird das sich das erste Dialogfeld schliesst?

Danke für eure eventuelle Hilfe
Zum Vergrößern anklicken....

Du kannst jedem Button mehrere Befehle mitgeben, also kannst du ihm auch mitteilen das er vor dem öffnen eines Dialogs oder einer Form die andere schließen soll, auch wenn der Befehl ins leere läuft weil keine offen ist sollte das keinen Fehler verursachen.

in einer Form solltest Du den close Befehl aber an letzter Stelle positionieren, hatte es früher Anfangs mal an erster Stelle mit dem Ergebnis das die Form geschlossen wird und die weiteren Befehle nicht ausgeführt wurden weil die Form ja dann beendet wird.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück