j查询比较高度未在降低高度时运行

jQuery compare height not running on reduction of height

本文关键字：高度 运行 查询 比较      更新时间：2023-09-26

我有以下jQuery检查左右列的高度。如果警报列表（左）的高度增加，则侧边栏行的高度也会增加以匹配。但是，一旦增加，并且警报列表减少（通过选择不同的区域或更少的警报数量），包含所有内容的侧边栏和整个行的高度不会降低，从而在下面留下巨大的空间。

要复制问题，请执行以下操作：
选择圣海伦斯区域。
选择 100 个警报
现在选择威勒尔地区。
包含高度不会降低。

http://178.62.45.247/areas.php

*请注意，这必须适用于IE7及更高版本 * 

function areasRowHeight() {
    $height1 = $('.nopr').height();
    $height2 = $('.nopl').height();
    if($height1 > $height2) {
        $('.areasrow').height($height1);
    }
    else {
        $('.areasrow').height($height2);
    }
}
$(document).ready(function(){     
    $( window ).resize(function() { 
        maxHeight('.nopr', '.nopl');
    });
    $( window).scroll(function(){
        maxHeight('.nopr', '.nopl');
    });
    $( window ).on( "orientationchange", function( event ) {
        maxHeight('.nopr', '.nopl');
    });
    $('.burgermenu').on('click', function(event){
        $(this).css('display', 'none');
        $('.cancel').css('display', 'inline-block');
        $('.smnav').css('display', 'block');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });
    $('.cancel').on('click', function(event){
        $(this).css('display', 'none');
        $('.burgermenu').css('display', 'inline-block');
        $('.smnav').css('display', 'none');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });
    $('.show5').on('click', function(event){
        hide('.latestalerts ul', 5);
        maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();
    });
    $('.show10').on('click', function(event){
        hide('.latestalerts ul', 10);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();
    });
    $('.show100').on('click', function(event){
        hide('.latestalerts ul', 50);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();
    });
    $('.showall').on('click', function(event){
        resetHide();
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();
    });        
    var trigger = $('.button li a'),
    container = $('.latestalerts');      
    trigger.on('click', function(event){
    windowAnchor();
    event.preventDefault();       
      var $this = $(this),
      target = $this.data('target');
      $('#content').load('controllers/areaload/' + target + '.php');   
        areasRowHeight();
    });
    maxHeight('.nopr', '.nopl');
});

我没有IE7，但如果我正确理解，您应该从style.css中删除 

.areasrow .nopr {
    height: 100% !important;
}
.areasrow .nopl {
    height: 100% !important;
}
.areasrow .nopr .inner-content {
    height: 100% !important;
}
.areasrow .nopl .sidebarbg {
    height: 100%;
}

然后更改main.js 

$('#content').load('controllers/areaload/' + target + '.php');
areasRowHeight();

自

$('#content').load('controllers/areaload/' + target + '.php', function(){
  maxHeight('.nopr', '.nopl');
});

有点脏，但有了这个文档结构，这就是我能建议的。

相关文章：