Question

我有以下代码：

<body onload="reset()">

    <div id="menu" class="menu"></div>

    <div id="container">
        <button onclick="openMenu()">Open Menu</button>
    </div>

    <script type="text/javascript">

        function reset(){

            var flag = true;    
            document.getElementById("menu").innerHTML = flag;           

        }

        function openMenu(){

            if (flag = true) {
                var menu = document.getElementById("menu");
                menu.className = 'menu2';
                flag = false;
            }else {
                var menu = document.getElementById("menu");
                menu.className = 'menu';
                flag = true;
            };

            document.getElementById("menu").innerHTML = flag;

        }

    </script>

</body>

和css是：

#menu{
	width: 100%;
	background-color: #232323;
}

.menu{
	height: 400px;
}

.menu2{
	height: 600px;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

问题是，当我第一次按下按钮时，div会将其高度更改为600px，就像它应该做的那样。但是第二次按下它（并且此时“flag”变量为false）div不会返回到“menu”类，将其高度改回400px。我似乎无法找到为什么会发生这种情况。

Answer 1

if (flag = true) {

需要

if (flag == true) {

或

if (flag === true) {

或

if (flag) {

使用jshint或jslint等工具

Answer 2

if (flag = true) {

必须是

if (flag == true) {

并且您应该创建一个变量标志，否则您无法检查它是否为真，如下所示：

var flag = true; // or false, just what you want for flag to be in the first place

如果Javascript按钮中的/ else语句不起作用

2 个答案: