javascript - 具有调整大小事件的等高行

Question

我有三行。媒介是内容、左右菜单等。我正在使用 jQUery 等高行脚本，它非常适合正常分辨率。现在有一个问题:为了制作响应式布局，较小的设备不显示右栏，左栏包含一个菜单，该菜单被缩小为下拉菜单。所以问题是，当我将分辨率从全分辨率更改为小分辨率时，左列仍然具有完整高度(大约 1100 像素)，顶部有下拉菜单(其余为空)。换句话说，从小到大，两列中的背景与之前的下拉列表一样高。由于我对 javascript 不太了解，所以我尽力但找不到解决方案。(使用 Bootstrap 3.0 构建)

Javascript 目前为止:

   (function($) {
     $.fn.equalHeights = function(minHeight, maxHeight) {
      tallest = (minHeight) ? minHeight : 0;
      this.each(function() {
        if($(this).height() > tallest) {
          tallest = $(this).height();
        }
      });
      if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
      return this.each(function() {
        $(this).height(tallest);
      });
    }
  })(jQuery);

$(window).resize(function(){
  $('.height').equalHeights(); 
});
$(window).resize();

Answer 1

你试过 Math.max() 了吗？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

这是一个工作示例:http://jsfiddle.net/6f6Pb/1/

function equalHeight(){
    var $colClass = $('.column'), //class name of columns
        heights = $colClass.map( function(){ //get height of all columns, pass it to an array (heights)
            return $(this).height();
        }).get();

    $colClass.height( Math.max.apply(null, heights) );
}

equalHeight();

更新:我再次查看了您的问题，我想我第一次没理解。如果你想使用 Bootstrap 在移动设备上隐藏一个元素，只需将相应的响应实用程序类放在元素上(.visible-md .visible-lg 适用于桌面和大屏幕，请在此处查看更多信息:http://getbootstrap.com/css/#responsive-utilities)。 Bootstrap 将为您处理。

如果你想在移动设备上禁用计算最大高度的函数，使用类似这样的东西:

function equalHeight(){
    if ( $(window).outerWidth() < 480 ) {
        return; //skips entire function when screen is smaller than 480px
    }

    ... //original code here
}

或者您可以使用其他浏览器检查器代替窗口宽度检查(Modernizr、detectbrowser 等)

希望这对您有所帮助。

更新:您的 equalheight 插件应该是这样的:(应该是 width() 而不是 outerWidth()。抱歉)

function equalHeight(){
  var $colClass = $('.height'); //class name of columns

  if ( $(window).width() < 992 ) {
    $colClass.height(''); //reset the height of the element
    return; //skips entire function
  }

  var heights = $colClass.map( function(){ //get height of all columns, pass it to an array (heights)
    return $(this).height();
  }).get();

  $colClass.height( Math.max.apply(null, heights) );
}

您的其中一个插件也有错误。检查控制台以查看它是什么。它可能会干扰您的其他脚本。