Question

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

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

我试过用javascript for循环和一些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(){
			
    });
  }
});

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

Answer 1

它非常适合我，我简化了您的代码：

NSLayoutConstraint

$(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;}

如何在其他子元素溢出JQuery时显示子元素

1 个答案: