Question

我希望监控<div id="please_monitor_me">是否可见。如果它不可见，我想删除边距（margin: 0;）。

我希望它在不可见时没有边距，因为稍后它可以用汉堡按钮显示。

当显示并点击移动视图处于活动状态并显示汉堡按钮时，我想删除表单顶部和底部不必要的边距。

Answer 1

这里有一个使用AngularJS的小片段。只需添加元素的CSS属性，然后添加类.hg-hide，并在这些规则中覆盖要更改的所有样式，只有在隐藏元素时才应用这些样式：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.isVisible = true;
  $scope.toggleVisibility = function() {
    $scope.isVisible = !$scope.isVisible;
  };
}

.my-div.ng-hide {
  margin: 0px;
}

.my-div {
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <button ng-click="toggleVisibility()">
    Toggle visibility
  </button>
    <div class="my-div" ng-show="isVisible">
      MY DIV
    </div>
    <div>
      MY OTHER DIV
    </div>
  </div>
</div>

Answer 2

基本上，安德烈的做法是正确的。完整的代码是：

.navbar-form {
     margin-top: 0; 
     margin-bottom: 0; 
}

@media (min-width: 768px) {
    .navbar-form {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

更新了fiddle

如何使用AngularJS监听DOM元素？

2 个答案: