折叠一个div后，获得另一个div的全宽度。
折叠一个div后，获得另一个div的全宽度。
提问于 2017-09-28 08:56:57
在网页上，我有两个div，内联。我有一个左撇子崩溃的按钮。如何使另一个div到全宽度大小，当再次显示第一个div时又使它变小？这是全宽度(col 4和col lg-8)。
这是当左div被折叠时(在这种情况下，绿色div需要全宽度大小)。
"https://jsfiddle.net/q4eotzb0/1/"
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
//This will hide the DIV by default.
$scope.IsVisible = true;
$scope.ShowHide = function() {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = !$scope.IsVisible;
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="SHOW/HIDE" ng-click="ShowHide()" />
<br />
<br />
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="test col-lg-4 col-md-4 col-sm-12 col-xs-12" ng-class="
{'divOpen': IsVisible}">
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="testtest"></div>
</div>
</div>.test {
background: red;
width: 250px;
height: 100px;
-webkit-transition: width 2s;-moz-transition: width 2s ease-in-out;-ms-
transition: width 2s ease-in-out;
-o-transition: width 2s ease-in-out;transition: width 2s;
}
.divOpen{
width: 100px;
}
.testtest{
background: green;
height: 100px;
width: auto;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-28 10:00:19
把这个css和你的
.divOpen + div{
width: calc(100% - 100px);
}Stack Overflow用户
发布于 2017-09-28 09:24:18
这里有一个使用flex的解决方案
$(function() {
$('[type=button]').on('click', function() {
$('.red').toggleClass('divOpen');
});
});* { margin: 0; padding: 0; box-sizing: border-box; }
.expender {
display: flex;
align-content: stretch;
}
.red {
background: red;
height: 100px;
flex: 1 1 250px;
-webkit-transition: flex-basis 2s;
-moz-transition: flex-basis 2s ease-in-out;
-ms-transition: flex-basis 2s ease-in-out;
-o-transition: flex-basis 2s ease-in-out;
transition: flex-basis 2s;
}
.red.divOpen {
flex-basis: 100px;
}
.green {
flex: 1 1 100%;
background: green;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="SHOW/HIDE" />
<div class="expender">
<div class="red"></div>
<div class="green"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46465031
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号