jquery - 切换Div容器的高度

我正在研究一个按钮，将在该按钮上应用切换开关，并且div高度会增加和减少。
所以我想做的是在按钮上说，在#about上单击#aboutsubmenu显示，并且#maincontainer的高度增加，如果打开，则单击相同的按钮将其关闭。
这是我想要做的

$(document).ready(function() {
    $('#aboutsubmenu').hide();
    var opened;
    var opened2;
    $('#about').click(function() {
        opened = "no";
        if (opened == "no") {
            $('#aboutsubmenu').show();
            $('#maincontainer').css('height', '387px');
            opened = "yes";
        }
        else if (opened == "yes") {

        }
    });
});

我在这里完全感到困惑。你能帮我吗。

最佳答案

试试这个，在事件处理程序外部初始化变量

var opened = "no"; //
var opened2;
$('#about').click(function () {
    if (opened == "no") {
        $('#aboutsubmenu').show();
        $('#maincontainer').css('height', '387px');
        opened = "yes";
    } else if (opened == "yes") {
        $('#aboutsubmenu').hide();
        $('#maincontainer').css('height', '100px');
        opened = "no";
    }
});