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都会显示在它的有序位置。右边将显示在右边，左边，左边，中间。

这里是jsfiddle demo

感谢您的支持。

如果它与CSS固定它会更好。

来源

2016-06-21 Scooter Daraf

http://jsfiddle.net/7n8evb40/这是一个有点改变，但也许会帮助你。 –

@ KIMB-technologies是的动画是正确的，但他们最小化的内容，我不想要的内容最小化，它就像当时的div来。 –

下面是如何使用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>

来源

2016-06-21 09:00:05 Erevald

正如我对Kimb所说的那样，内容被最小化了，我希望最小化divs的内容保持原样，这意味着最大化的div会超过它们。 –

就像它在我的小提琴中工作。 –

@ScooterDaraf已编辑，内容宽度现在保持不变。 – Erevald

Onclick在其他divs上最大化div

回答

相关问题