Problem display div mittels klick durch Javaskript

[Gunnar Bittersmann]

@@AMG

document.getElementById('dropdown').addEventListener('click', showmen);
document.getElementById('dropdown').addEventListener('mouseover', showmen1)
document.getElementById('dropdown').addEventListener('mouseout', showmen2)

Wenn du die Referenz zu einem Objekt öfter brauchst, muss du nicht jedesmal erneut das DOM danach durchsuchen. Besser die einmal gefundene Referenz in einer Variablen merken:

var dropdownElement = document.getElementById('dropdown');
dropdownElement.addEventListener('click', showmen);
dropdownElement.addEventListener('mouseover', showmen1);
dropdownElement.addEventListener('mouseout', showmen2);

Und auch hier:

function showmen() {
    if (document.getElementById('dropdown-content').style.display == 'none') {
        document.getElementById('dropdown-content').style.display = 'block';
    } 
    else {
        document.getElementById('dropdown-content').style.display = 'none';
    }
}

Dito.

var dropdownContentElement = document.getElementById('dropdown-content');

function showmen() {
    if (dropdownContentElement.style.display == 'none') {
        ⋮
    }
}

Oder du übergibst das Element als Parameter:

function showmen(element) {
    if (element.style.display == 'none') {
        ⋮
    }
}

Aufruf dann mit showmen(dropdownContentElement).

function showmen2() {
    document.getElementById('dropdown-content').style.display = 'none';    
}

Eine Funktion, die etwas ausblendet, heißt „show…“?

Passende Namen für die Funktionen wären „toggle“, „show“, „hide“.

Und die Funktionen sollten auch besser nicht die CSS-Eigenschaft display direkt ändern. Sondern das HTML-Attribut hidden setzen bzw. löschen.

LLAP 🖖