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

Question

我有三排。中间一种是内容、左右菜单等。我使用的是jQUery等高行脚本，它可以很好地用于正常分辨率。现在有一个问题:要做出响应性布局，较小的设备不显示右列，左列包含一个菜单，该菜单被缩小为下拉列表。所以问题是，当我将分辨率从全分辨率改为小分辨率时，左列仍然有一个完整的高度(大约1100 So )，顶部有下拉菜单(rest为空)。另一方面，从小到大，这两列的背景是一样高的下拉之前。由于我对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()了吗？

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.有形-lg)上，请参阅更多信息：http://getbootstrap.com/css/#responsive-utilities)。引导会帮你处理的。

如果要禁用在移动环境下计算最大高度的函数，请使用如下所示：

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

    ... //original code here
}

或者您可以使用其他浏览器检查器来代替窗口宽度检查(现代化、探测浏览器等)。

希望这能有所帮助。

更新：您的等高插件应该如下所示：(应该是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) );
}

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