如果内容溢出 jquery/javascript，请增大 div 高度

Question

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

然后 div 如果内容溢出则必须将其高度设置为自动，否则则保持其高度。包装纸 (.thumb) 也会根据背面 div 的高度改变高度。

if 语句中的代码有效，但它似乎没有检查条件。它还会在内容没有溢出 div 时执行代码，因此它也会在此处将高度设置为自动，从而使 div 变小。我想让没有溢出的div保持原来的高度。

我将 outerHeight 和 scrollHeight 的高度都放到了控制台，以检查它读取的高度。没有overflow的div说outerheight比scrollHeight大，所以不应该执行if语句。我把 else 语句放在那里检查它是否执行 console.log()，但它没有。

我不明白我的代码有什么问题。这是我的 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 高度

Make div height larger if the content overflows with jquery/javascript

javascript

jquery

overflow

outerheight