等高度行与调整大小事件

Question

我有三行。媒体是内容，左右菜单等。我正在使用jQUery等高行脚本，它在正常分辨率下工作得非常好。 现在出现了一个问题：要做出响应式布局，右侧的列不会显示在较小的设备上，而左侧的列会保留一个缩小为下拉菜单的菜单。所以问题是，当我将分辨率从全分辨率更改为小分辨率时，左列仍然具有完整的高度（大约1100px），顶部的下拉菜单（其余为空）。其他方式从小到大，两列的背景与之前的下拉相同。 由于我对JavaScript没有太多的想法，我尽我所能，但找不到解决方案。 （建筑，引导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等使用其他浏览器检查）

希望这有助于。

UPDATE：你equalheight插件应该是这样的：（应该是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)); 
} 

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