Jquery 切换Div容器高度

Jquery 切换Div容器高度,jquery,css,Jquery,Css,我正在操作一个按钮,在该按钮上应用切换,div高度增加或减少。 因此,我想做的是,在一个按钮上,让我们说一下关于,点击关于,显示,主容器的高度增加,如果打开,同样点击,它就会关闭。 这就是我要做的 $(document).ready(function() { $('#aboutsubmenu').hide(); var opened; var opened2; $('#about').click(function() { opened = "no"

我正在操作一个按钮,在该按钮上应用切换,div高度增加或减少。 因此,我想做的是,在一个按钮上,让我们说一下关于,点击关于,显示,主容器的高度增加,如果打开,同样点击,它就会关闭。 这就是我要做的

$(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") {

        }
    });
});
我在这里完全糊涂了。你能帮我吗。

试试下面的代码:

$(document).ready(function () {
    $('#aboutsubmenu').hide();
    var opened = false;
    $('#about').click(function () {
        $('#aboutsubmenu').toggle(); // Toggle visibility
        $('#maincontainer').height(opened ? 387 : 100);
        opened = !opened;
    });
});
你做错了什么:

opened = "no";
函数开头的代码使它一直处于打开状态。

请尝试以下代码:

$(document).ready(function () {
    $('#aboutsubmenu').hide();
    var opened = false;
    $('#about').click(function () {
        $('#aboutsubmenu').toggle(); // Toggle visibility
        $('#maincontainer').height(opened ? 387 : 100);
        opened = !opened;
    });
});
你做错了什么:

opened = "no";

函数开头的代码使它一直处于打开状态。

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

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";
    }
});

尝试此操作,在事件处理程序外部初始化变量

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";
    }
});

“每次单击”而不是“功能启动”这将执行与Satpal的awnser only较短代码完全相同的操作。“每次单击”而不是“功能启动”这将执行与Satpal的awnser only较短代码完全相同的操作。