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的方法。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Onclick在其他div上最大化div

1 个答案: