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

回答

相關問題