Question

当单击菜单按钮div时，我希望它过渡到它要做的事情，并使菜单div出现，而该代码的功能不同。由于某些原因，第二个功能无法运行。但是，如果我删除else {}部分，它似乎可以工作。我该如何解决？

            #menubtn {
                margin-top:4px;
                margin-left:-300px;
                position:absolute;
                display:inline-block;
            }
            #menubtn div {
                width:35px;
                height:5px;
                background-color:black;
                margin:6px 0;
                transition: 0.4s;
            }
            .change #bar1 {
                transform: rotate(-45deg) translate(-9px, 6px);
            }
            .change #bar2 {
                opacity:0;
            }
            .change #bar3 {
                transform:rotate(45deg) translate(-8px, -8px);
            }
            #menu {
                background-color:white;
                width:300px;
                height:400px;
                position:absolute;
                top:80px;
                border-right:solid 5px rgba(35, 203, 167, 1);
                border-bottom:solid 5px rgba(35, 203, 167, 1);
                z-index:10;
                transition: width 1s;
                overflow:hidden;
                display:none;
            }

<div id="menubtn" onclick="menu(this); menushow()">
            <div id="bar1"></div>
            <div id="bar2"></div>
            <div id="bar3"></div>
        </div>
<div id="menu">
            <h1>Menu</h1>
            <a href="">Home</a><br>
            <a href="">About me!</a><br>
            <a href="">Bread</a><br>
            <a href="">Sweet treats</a><br>
            <a href="">How to start baking</a>
        </div>

    function menu(x) {
        x.classList.toggle("change")
    }
    var menushow = "false"
    function menushow() {
        if (menushow == "false") {
        document.getElementById("menu").style.display="block";
        menushow = "true";
        } else {
            document.getElementById("menu").style.display="none";
            menushow = "false";
        }
    }

Answer 1

变量与函数具有相同的名称，因此代码无法区分两者。如果您更改变量或函数的名称（此处更改了变量名称），则代码将按预期运行。

    var mshow = "false"
    function menushow() {
        if (mshow == "false") {
        document.getElementById("menu").style.display="block";
        mshow = "true";
        } else {
            document.getElementById("menu").style.display="none";
            mshow = "false";
        }
    }

If-else函数不运行

1 个答案: