我有三行。媒介是内容、左右菜单等。我正在使用 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();
最佳答案
你试过 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) );
}
您的其中一个插件也有错误。检查控制台以查看它是什么。它可能会干扰您的其他脚本。
关于javascript - 具有调整大小事件的等高行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21637690/