Question

我有一个类似 - <section id="left_side"> //Some crap here.</section>的部分和这样的旁边元素 - <aside id="right_side"> //Some crap here.</aside>

我想要做的是当旁边容器的高度大于部分容器时，然后使用jQuery我希望它的高度扩展并且大于或等于旁边容器。

但是，同时如果旁边小于部分容器，那么我希望它的高度扩展并且等于部分容器。

我完全不知道如何使用jQuery。

Answer 1

$('.section-container').on('adjustNeighbors', '#leftside,#rightside', function () {
  var thisHeight = $(this).outerHeight();
  var sectionToResize = $(this).is('#leftside') ? '#rightside' : '#leftside';

  $(sectionToResize).css('height', thisHeight + 'px');
});

然后像这样触发..

function someFunction(){    
    // some code that resized #leftside or #rightside
    thatSection.trigger('adjustNeighbors');
}

Answer 2

function resize_section_aside() {
     var section = $('leftside'),
         aside = $('rightside'),
         section_height = section.height(),
         aside_height = aside.height();
     if( aside_height > section_height ) {
        section.height( aside_height );  // re-size section to aside
     } else {
        aside.height( section_height );   // re-size aside to section
     }
    });
}

$(function() {
   resize_section_aside();
});

以上代码将在DOM加载完成时触发。如果您需要任何事件来触发它，那么只需在该事件处理程序中调用resize_section_aside()函数。

使用jquery动态设置两个元素的高度

2 个答案: