Question

我有两列，每列有两个重叠的div。如果单击前面的div，它会淡出并显示后面的div。

然后，如果后面的内容溢出，则必须将其高度设置为自动，并且当它没有时保持高度。包装器（.thumb）也会根据后面div的高度来改变高度。

if语句中的代码有效，但它似乎无法检查条件。当内容没有溢出div时它也执行代码，因此它也将高度设置为auto，使div更小。我想要没有溢出的div保持其原始高度。

我将outerHeight和scrollHeight的高度都放到控制台上，以检查它读取的高度。没有溢出的div表示它的outerheight比scrollHeight大，所以它不应该执行if语句。我在那里放了else语句来检查它是否执行了console.log（），但它没有。

我不明白我的代码有什么问题。这是je JSfiddle：https://jsfiddle.net/Isoldhe/5scfqzzh/33/

HTML：

<div class="main">
<div class="container">

  <div class="row">
      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque fecimus. Quorum sine causa fieri nihil putandum est. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Quibusnam praeteritis? Quod si ita sit, cur opera philosophiae sit danda nescio. An hoc usque quaque, aliter in vita? An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P.</p>
        </div>
      </div>

      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor...</p>
        </div>
      </div>

  </div>
</div>
</div>

CSS：

.main {
  width: 100%;
  position: relative;
}

.thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.front {
  position: absolute;
  background: blue;
  width: 150px;
  height: 100px;
  padding: 10px;
  z-index: 10;
  border-radius: 15px;
  border: 3px solid rgb(163, 0, 0);
  cursor: pointer;
}

.back {
  position: absolute;
  background: green;
  width: 150px;
  height: 100px;
  font-size: 1em;
  text-align: center;
  border-radius: 15px;
  z-index: 9;
  padding: 10px;
  border: 3px solid rgb(163, 0, 0);
  overflow: hidden;
}

JS：

$('.front').click(function() {
    $(this).fadeOut(500);

    var $back = $(this).siblings('.back');
    var $thumb = $(this).parent('.thumb');

    console.log($back.outerHeight());
    console.log($back.prop('scrollHeight'));

    if ($($back.outerHeight() < $back.prop('scrollHeight'))) {
      $back.height('auto'); // changes height so all content is visible
      $thumb.height($($back).height() + 60); // changes thumb height to whatever the back div height is + adds some margin
    }
    else {
      console.log('outerHeight is bigger than scrollHeight');
    }

});

Answer 1

您遇到的问题是$

中的第一个if ($($back.outerHeight() < $back.prop('scrollHeight'))) {

应该是：if ($back.outerHeight() < $back.prop('scrollHeight')) {

Demo here

如果内容溢出jquery / javascript，则使div高度更大

1 个答案: