Question

我正在编写将在Web应用程序的许多小部件中使用的组件。有没有办法改变因div大小而导致的元素可见性？

<div class="container" style="width:100%">
  <div>elements to display when width is less than 400px</div>
  <div>elements to display when width is more than 400px</div>
  <div>another div</div>
</div>

例如在css中是否可以？我读到了媒体查询，但元素的可见性仅取决于使用它的小部件大小，仅此而已。

Answer 1

我没有运行它，但我希望你知道如何实现它。我不知道纯css的解决方案，但使用jQuery并不难实现：

if( parseInt(jQuery('.container').css('height')) > 400){
    jQuery('.container').css('visibility', 'hidden');
} else{
    jQuery('.container').css('visibility', 'visible');
}

Answer 2

您可以使用指令：

var app = angular.module('myApp', []);
app.directive('myDirective', ['$window', function($window) {
  return {
    link: link,
    restrict: 'A'
  }
  function link(scope, element, attrs) {
    scope.windowWidth = $window.innerWidth; // init

    /* window width or element width jQLite CSS magic goes here */
    angular.element($window).bind('resize', function() {
      scope.windowWidth = $window.innerWidth; // re-calculate
      scope.$apply(); // re-draw
    });
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
  <div class="container" style="width:100%;">
    <div my-directive ng-show="windowWidth < 400">
      elements to display when width is less than 400px
    </div>
    <div my-directive ng-show="windowWidth > 400">
      elements to display when width is MORE than 400px
    </div>
  </div>
</div>

根据div的大小显示项目

2 个答案: