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

我有三排。中间的一个是内容，左右菜单等等。我使用的是jqueryequalheights行脚本，它在正常分辨率下运行得非常好。 现在出现了一个问题：为了做出响应性布局，较小的设备不显示右栏，而左栏保留一个菜单，该菜单缩小为下拉菜单。所以问题是，当我将分辨率从全分辨率更改为小分辨率时，左列仍然有一个全高（约1100px），顶部有下拉菜单（其余为空）。从小到大，两列中的背景与以前的下拉列表一样高。 由于我对javascript不太了解，我尽了最大努力，但找不到解决方案。 （使用Bootstrap 3.0构建）

到目前为止：

   (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（）吗

以下是一个工作示例：

更新：我再次回顾了你的问题，我想我第一次没有理解。如果要使用引导隐藏移动设备上的某个元素，只需在该元素上放置相应的响应实用程序类（.visible md.visible lg对于桌面和大屏幕，请参阅此处的更多信息：）。Bootstrap将为您处理此问题

如果要禁用移动设备上计算最大高度的功能，请使用以下方法：

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

    ... //original code here
}

函数相等高度（）{
if（$（窗口）.outerWidth（）<480）{
return；//当屏幕小于480px时跳过整个函数
}
…//这里是原始代码
}

或者您可以使用其他浏览器检查器代替窗口宽度检查（Modernizer、detectbrowser等）

希望这有帮助

更新：您的equalheight插件应该如下所示：（应该是width（）而不是outerWidth（）。抱歉）

函数相等高度（）{
var$colClass=$（'.height'）；//列的类名
如果（$（窗口）.width（）<992）{
$colClass.height（“”）；//重置元素的高度
return；//跳过整个函数
}
var heights=$colClass.map（函数（）{//获取所有列的高度，将其传递给数组（高度）
返回$（this.height（）；
}).get（）；
$colClass.height（Math.max.apply（null，height））；
}

---

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

这不完全是我想要实现的。当你有一个全尺寸的窗口（比如说它是1920x1080）时，左右两列的高度是相同的，perfekt。调整窗口大小为1024x640，类别折叠为下拉列表，但仍然有一个非常高的背景框用于显示另一种方法是，打开一个小窗口，刷新页面，然后尝试打开类别下拉列表（=类别链接将在内容后面的站点中显示，没有背景），或者调整到全尺寸，背景将保持40px高，与哪个脚本无关。BS visible-*我确实用于未显示的项目我认为问题在于移动设备和桌面的类别列表的类名是相同的（.categorymenu），因此BS都使用“折叠”应用了这两个类名，因此当您将其调整回大屏幕时，类别列表不会显示为“折叠”。尝试用其他东西更改桌面（>768等）类别列表的类名。Dan1121您是对的，这是菜单中的一个错误，因此它再次折叠甚至最大化。但是等高似乎没有改变，更新上面链接的代码更新了代码。请注意，我使用了$（window）.outerWidth（），在此之前，应该只使用$（window）.width（）。我已经用它再次更新了代码。现在，它似乎从小到大都在起作用，但反过来就不行了。如果你有一个大尺寸的窗口并将其调整为小尺寸，它仍然会显示大量的空背景色。还有什么好主意吗

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

    ... //original code here
}

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) );
}