Onclick在其他div上最大化div

i want to maximize div over other divs BUT not minimize content of other divs . I mean the content stay as it is not minimized .

我想最大化div而不是其他div,但不要最小化其他div的内容。我的意思是内容保留,因为它没有最小化。

Im trying this

我试着这个

 <div id="content">
    <div id="containerleft">
       <div id="box1" class="box">im left the content here to see if it minimized</div>
       <div id="box2" class="box">im middle the content here to see if it minimized</div>
       <div id="box3" class="box">im right the content here to see if it minimized</div>
    </div>
 </div>

And js code

和js代码

   $(".box").click(function(){

var clone = $(this).clone().addClass('active');
var parent = $(this).parent();
var pos = $(this).position();

$(this).append(clone);

console.log(pos);

clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
    width: '80%', 
    height : '50%',
    top: 0,
    left: '10%'
},300);


});

this works perfectly with the div in the middle But not on other divs .

这适用于中间的div而不是其他div。

example if i click on right div , i want the div will maximize in its place and the other divs minimized to the left .

例如,如果我点击右侧div,我希望div将在其位置最大化,其他div最小化到左侧。

and if i click on left div the other will be minimized to the right.

如果我点击左侧div,另一个将最小化到右侧。

the middle div is working good it shows in its place . i want every div will show in its ordered place . the right will show in right , left in left , middle in middle.

中间的div工作得很好,它显示在它的位置。我希望每个div都会在其有序的地方展示。右侧将显示右侧,左侧,中间位于中间。

Here is the jsfiddle demo

这是jsfiddle演示

Thanks for your support .

感谢您的支持 。

IF its fixed with css it would be better.

如果用css固定它会更好。

1 个解决方案

#1

Here's how you can do it with css.

以下是使用css的方法。

$(".box").on('click',function(){
    $(".box").removeClass('active');
    $(this).addClass('active');
});

#content{
 width:450px;
 height:150px;
 display: flex;
}

.box{
  -ms-flex: 1;
  flex: 1;
  position: relative;
  transition: all .3s;
  overflow:hidden;
}

.box>div{
    position: absolute;
    left: 0;
    max-width: 150px;
    top: 0;
    width: calc(450px - 40%);
    padding: 15px;
}

.box.active{
  -ms-flex: 1 1 60%;
  flex: 1 1 60%;
}

#box1{
 background:pink;
}
#box2{
 background:gray;
}

#box3{
 background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="box1" class="box"><div>im right the content here to see if it minimized</div></div>
<div id="box2" class="box"><div>im right the content here to see if it minimized</div></div>
<div id="box3" class="box"><div>im right the content here to see if it minimized</div></div>
</div>