Question

我有两个div并排divA和divB。我在divB上面有一个最大化按钮。当我点击divB上的按钮时，divB应占据divA的空间并变大，divA应该折叠。再次单击时，应恢复到正常大小。如何使用jquery获取此功能？

Answer 1

答案是使用jQuery的toggle（）或animate（）函数。 Viraj Nalawade为您提供了一个如何使用slideToggle并折叠一个div的好例子。

我在这里给你另一个例子，包括两个div，并排：jsfiddle或参见下面的片段：

hello_word.erl:11: undefined macro 'INFO_MSG/2'
hello_word.erl:8: function start/2 undefined
hello_word.erl:6: Warning: behaviour gen_mod undefined
error

var original_width=$("#divA").width();
var max_width=original_width*18/10;
var min_width=original_width*2/10;
var div_status = {};
$("button").click(function () {
    var parent = $(this).parent();
    var sibling = $(parent).siblings();
    var parent_id = $(parent).attr("id");
    var sibling_id = $(sibling).attr("id");

    if (div_status[parent_id]) {
        div_status[parent_id] = false;
    } else {
        div_status[parent_id] = true;
        div_status[sibling_id] = false;
    }
   
    if (div_status[parent_id]) {
        $(parent).animate({
            width: max_width+"px"
        });
        $(sibling).animate({
            width: min_width+"px"
        });
    } else {
        $(parent).animate({
            width: original_width+"px"
        });
        $(sibling).animate({
            width: original_width+"px"
        });
    }
});

#container {
    width:500px;  
    float:left;
}
div.mobile {
    float:left;
    width:50%;
    height:200px;    
}
#divA {
    background-color:red;
}
#divB {
    background-color:green;
}

使用jquery折叠div

1 个答案: