Javascript 响应柱和可扩展div

我在这里创建了一个代码笔 在其中，我将保持2列的响应布局，但当我在其中一个div中单击“open”时，它应该在其他100px的高度上扩展。有可能吗？是否可以使用这种页面结构？无论如何，这是代码：

<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles" ng-app="MyApp">
  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="2" md-row-height-gt-md="3:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

    <md-grid-tile ng-repeat="tile in vm.tiles" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1">
      <md-card layout-fill ng-class="tile.background">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Action buttons</span>
          </md-card-title-text>
        </md-card-title>
        <md-button type="button" data-ng-if="tile.showDetails" data-ng-click="tile.showDetails = false">
          Close
        </md-button>
        <md-button type="button" data-ng-if="!tile.showDetails"  ng-click="tiles.showDetailsFnt(tile)">
          Open
        </md-button>
      </md-card>
    </md-grid-tile>
  </md-grid-list>
</div>

动作按钮
接近
打开

Js

angular
.module（'MyApp'，['ngMaterial'，'ngMessages']））
.controller（'gridListDemoCtrl'，函数（$scope）{
$scope.tiles={
showDetails:false，
showDetailsFnt：功能（平铺）{
控制台日志（平铺）；
tile.showDetails=true；
}
};
this.tiles=buildGridModel({
图标：“化身：svg-”，
标题：“Svg-”，
背景：“”
});
函数buildGridModel（tileTmpl）{
var it，结果=[]；
对于（var j=0；j将click
$event
添加到functions参数中，这样您就可以访问div，并使用jQuery-Lite编辑它

$scope.tiles = {
  showDetails: false,
  showDetailsFnt: function($event, tile) {  
    angular.element($event.currentTarget.parentElement).addClass('extended');
  }
};

在DOM中传递
$event

<md-button type="button" data-ng-if="!tile.showDetails"  ng-click="tiles.showDetailsFnt($event, tile)">
   Open
 </md-button>

单击“打开”时，希望div高度增加100px？是的，完全正确。该div为course@JoshSpearsany想法？这太过分了，但我不熟悉角度。你想看一个非角度的解决方案吗？嗯…让我看看。也许我可以把它转换成角度。也许吧！让我们现在看看
<md-button type="button" data-ng-if="!tile.showDetails"  ng-click="tiles.showDetailsFnt($event, tile)">
   Open
 </md-button>

.extended {
  height: 200px; // Or whatever
}