元素不会根据变量值和if语句显示（）

Question

我试图做一个蓝色方形显示，如果fullScreenCropStatus = true和一个红色方块显示，如果fullScreenCropStatus = false一次“完成”按钮被点击。

该变量是正确的，并且显示正确的值，但是单击“完成”时，蓝色正方形不会显示。 我尝试了show() / hide()以及在CSS中设置显示值的当前格式，但都没有使蓝色方块出现。

红场成功hide()或display:none 。 我真的对此感到困惑。

下面的代码是JSbin

JS：

var fullScreenCrop = false;
var fullScreenCropStatus = false;
$('#cropping--modes').click(function() {
    fullScreenCrop = !fullScreenCrop;
    console.log("fullScreenCrop = " + fullScreenCrop);
});
$("#done").click(function() {
    fullScreenCropStatus = fullScreenCrop;
    console.log("fullScreenCropStatus = " + fullScreenCropStatus);
    if (fullScreenCropStatus === true) {
        $(".done--title__container").css("display", "none");
        $(".done--title__container--fullscreen").css("display", "block");
    } else if (fullScreenCropStatus === false) {
        $(".done--title__container").css("display", "block");
        $(".done--title__container--fullscreen").css("display", "none");
    }
});

HTML：

<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>

<div class="done--title__container">
<div class="done--title__container--fullscreen">

CSS：

.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; }

.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; }

#cropping--modes { display:block; width:200px; height:30px; }

#done { display:block; width:200px; height:30px; }

Answer 1

关闭div标签，就可以了：

<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>

<div class="done--title__container"></div>
<div class="done--title__container--fullscreen"></div>