Question

我有三排。介质一是内容，左右菜单等。我正在使用jQUery等高行脚本，它对于正常分辨率非常有效。现在出现了一个问题：要制作响应式布局，不会为较小的设备显示右列，而左列会保留一个菜单，该菜单会缩小为下拉列表。问题是，当我将分辨率从完全分辨率更改为小分辨率时，左列仍然具有完整高度（大约1100px），顶部有下拉菜单（其余为空）。从小到大的其他方式，两列中的背景与之前的下拉一样高。由于我对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) );
}

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

具有resize事件的相等高度行

1 个答案: