Onclick 在其他 div 上最大化 div

Question

我想在其他 div 上最大化 div 但不最小化其他 div 的内容。我的意思是内容不会被最小化。

我正在尝试这个

 <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>

还有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);


});

这与中间的 div 完美搭配，但不适用于其他 div。

例如，如果我单击右侧 div，我希望 div 在其位置最大化，而其他 div 最小化到左侧。

如果我点击左边的 div，另一个将被最小化到右边。

中间的 div 工作得很好，它显示在它的位置。 我希望每个 div 都显示在其有序的位置。右边显示在右边，左边显示在左边，中间显示在中间。

这里是jsfiddle demo

感谢您的支持。

如果用 css 固定就更好了。

Answer 1

这是使用 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>