如何使用JQuery当一个子元素溢出时显示另一个子元素

Question

我最近一直在开发评论功能。默认情况下，包含文本的段落元素的高度为80px。溢出设置为隐藏。

我还有另一个按钮（标记为“查看更多”），它通过将高度更改为“自动”来展开段落。只有在段落内容溢出默认的80px高度时，该按钮才应可见。否则，该按钮不得显示。

我尝试使用javascript循环和一些JQuery代码来实现这一点，但它并不能像应该的那样工作。它显示或隐藏所有评论部分的按钮。

以下是html：

<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
 amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>

以下是 JavaScript 代码：

$(document).ready(function(){
  var element = $('.commentOwnerPost');
  for(i=0; i < element.length; i++){
    var commentText = $(element[i]).children('.commentText');
    if ($(commentText).offsetHeight < $(commentText).scrollHeight) {
      $parent = $(commentText).parent('.commentOwnerPost');
      $parent.find('.btnSeeMore').hide();
      console.log('Comment text  not overflowing ');
    } else {
      $parent = $(commentText).parent('.commentOwnerPost');
      $parent.find('.btnSeeMore').show();
      console.log('Comment text overflowing ');
    }
   
    $('.btnSeeMore').click(function(){
   
    });
  }
});

感谢您抽出时间阅读。任何帮助都将不胜感激。

- UnWorld

---

“充满 JQuery 的溢出” 应该是 Stack Overflow 的标语。 - Sworrub Wehttam

我不会尝试“检测”溢出，因为它很麻烦，而且相比于你所获得的东西，使用了大量资源。也许你可以简化你的问题，例如通过计算段落文本长度来获得一个相当不错的近似值。 - Swiffy

可能是Can I detect an overflow event in jquery?的重复问题。 - Swiffy

Answer 1

它对我来说完美地运作，我简化了你的代码：

$(document).ready(function(){
  var elements = $('.commentOwnerPost');
  
  elements.each(function() {
    var el = $(this).find('.commentText').get(0);
    if(el.offsetHeight < el.scrollHeight) {
      $(this).find('.btnSeeMore').show();
    } else {
      $(this).find('.btnSeeMore').hide();
    }
  });
});

.commentText { max-height: 25px; overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
 amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>


<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet.
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>

- Marcos Pérez Gude

---

太棒了。这确实有效，只是段落中没有足够的内容导致溢出。吸取教训。 - UnWorld

是的，如果这个条件 (el.offsetHeight < el.scrollHeight) 成立，那么内容就会溢出，你可以应用你想要的规则。请给我点赞；）谢谢！ - Marcos Pérez Gude