Onclick在其他divs上最大化div
我想在其他div上最大化div,但不能最小化其他div的内容。我的意思是内容保持不变,因为它没有被最小化。Onclick在其他divs上最大化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将在其位置最大化,其他divs最小化到左边。
如果我点击左边div,另一个会最小化到右边。
中间div工作良好它显示在它的位置。 我想每个div都会显示在它的有序位置。右边将显示在右边,左边,左边,中间。
感谢您的支持。
如果它与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>
正如我对Kimb所说的那样,内容被最小化了,我希望最小化divs的内容保持原样,这意味着最大化的div会超过它们。 –
就像它在我的小提琴中工作。 –
@ScooterDaraf已编辑,内容宽度现在保持不变。 – Erevald
http://jsfiddle.net/7n8evb40/这是一个有点改变,但也许会帮助你。 –
@ KIMB-technologies是的动画是正确的,但他们最小化的内容,我不想要的内容最小化,它就像当时的div来。 –