Question

在网页上我有两个div，内联。我有一个折叠左div的按钮。如何将另一个div设置为全宽尺寸，再次显示第一个div时再次使其变小？这是全宽（col-lg-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;
}

Answer 1

将此css与您一起添加

.divOpen + div{
    width: calc(100% - 100px);
}

Answer 2

这是使用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>

崩溃后一个div，获得另一个div的全宽

2 个答案: