javascript - HTML 中的 "Read More"按钮自动隐藏/显示

Question

看看脚本:

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});

body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}

#c2 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}

<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>

对于第一段，#c1不需要Read more，那怎么可能隐藏因为没有用...？

更新 1

I have no control over the text length.

之前，height 和 width 分别设置为 2.6em 和 200px 作为示例，因此我得到了一个解决方案:

You can iterate over each div and check its text content. If it is less than the certain length you can hide its next element, i.e the button. In below code, you can adjust 100 to any value you want.

By Hari Das, Solution DEMO

为什么 Hari 的解决方案与我的问题不符？

我不是优先考虑字符的数量，而是优先考虑div的高度。

为什么我优先考虑 div 的高度？

如果我采用 Hari 的解决方案:

假设每行只有3个字母，直到第15行，div的 高度将是长并且字符长度将小于100，所以这里 Hari 的解决方案不会折叠 para 并且不会显示任何按钮...

Answer 1

您可以遍历每个 div 并检查其滚动高度。如果它小于可见高度，您可以隐藏它的下一个元素，即按钮。

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if($(this)[0].scrollHeight <= $(this)[0].offsetHeight){
      $(this).next().hide();
    }
  });
});

body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}

#c2 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large.
  Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>