JQuery单击函数不添加所有CSS类

Question

这是JQuery：

$(document).ready(function(){
    var btn = $(".menuBtn");
    var menu = $(".menuBox");
    var content = $(".container");

    var isOpen = 0;

    btn.click(function() {
        if(isOpen == 0) {
            isOpen = 1;

            menu.addClass("menuOpen");
            content.addClass("opened");
            btn.addClass("opened");
        } else if(isOpen == 1) {
            isOpen = 0;

            menu.removeClass("menuOpen");
            content.removeClass("opened");
            btn.removeClass("opened");
        }
    });
});

单击该按钮时，menu将获得正确的课程。但是content和btn并没有像他们应该的那样得到opened类。至少我不这么认为。

opened类只包含left: 60%;参数。目标是使这两个类将left标记设置为60％。

我对JQuery很新，但我认为这应该可以正常工作。但我想我错过了一些规则。

我还可以补充一点，content和btn类默认为left: 0;。

这是我的HTML：

    <span class="menuBtn">
        &#9776;
    </span>
    <div class="menuBox">
        <!-- This is just now a black box -->
    </div>

    <div class="container">

        Website content

    </div>

    </div>

container类的CSS。在定位方面，menuBtn几乎相同：

.container {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
    transition: left .2s;
}