我的下拉菜单无法正常工作

Question

I want for people to hide/show nav when they click "Menu". Here is my code:

<script>
    document.querySelector(".switch").onclick = function() {
        if (document.querySelector(".mobileNav ul").className == "drop"){
            this.className = "dropShow";
        }
        else {
            this.className = "drop";
        }
    };

</script>

but it doesn't do anything.

Answer 1

Almost there. Just a minor error.

this.className assigns the className to the button element with class .switch . Instead do the following:

document.querySelector(".switch").onclick = function() {

    var ulElem = document.querySelector(".mobileNav ul");

    if ( ulElem.className== "drop"){
        ulElem.className = "dropShow";
    }
    else {
        ulElem.className = "drop";
    }
};