<style>
.click{
width:500px;}
</style>
<div class="container">
<div class="click"></div></div>
双击内部的div会变成两个宽度等分的div(变成两个250px的div)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
.div1{
width: 400px;
height: 400px;
border:1px solid red;
}
body{
overflow: hidden;
width:100%;
height:100%;
}
.floatLeft{
float: left;
}
</style>
<body>
<p>hahah</p>
<h1>哈哈</h1>
<div class="div1"></div>
<script src="jquery-core.src.js"></script>
<script>
(function(win,doc,$){
var target1 = 0;
var orginalTar = {};
var oldObject = [];
// 獲取當前div的寬高數量
function getInformation(){
var orginal1 = {};
orginal1.width = $('div').width();
orginal1.height = $('div').height();
orginal1.num = $('div').length;
for(var i = 0;i< orginal1.num;i++){
oldObject[i] = $('div')[i];
}
return orginal1;
}
// 獲取生成的div的寬高以及數量
function operate(obj){
var targetObj = {};
targetObj.width = obj.width / 2;
targetObj.height = obj.height / 2;
targetObj.num = obj.num * 2;
return targetObj;
}
// 生成相對應的div
function reworkDiv(obj){
for(var i = 0;i < obj.num; i++){
var target2 = document.createElement("div");
$(target2).css({
"width" : obj.width + "px",
"height" : obj.height + "px"
});
$(target2).addClass("floatLeft");
if (i % 2){
$(target2).css("border","1px solid red");
}else{
$(target2).css("border","1px solid blue");
}
$(target2).appendTo($('body'));
}
}
// 移除舊的div
function removeOld(obj){
for(var i = 0 ;i < obj.length; i++){
$(obj)[i].remove();
}
}
$("body").on("click",function(){
orginalTar = getInformation();
target1 = operate(orginalTar);
reworkDiv(target1);
removeOld(oldObject);
})
})(window,document,jQuery);
</script>
</body>
</html>这个是很简单的，楼主要功能自己加。
可以重写.click设置flex为1，父级设置display:flex;然后双击的时候调用clone复制div再插入就好了
新手提个笨办法，三个DIV前后叠加，点击一个大的DIV之后就隐藏，同时两个小的DIV显现即可。CSS的{display:none}
$(".click").click(function(){
var html = "<div style='width:250px;'></div><div style='width:250px;'></div>";
$(this).parent().html(html);
})