如何使用Jquery動態隱藏文本并添加折疊按鈕？

我有一個專案要實作當文本超過5行時，需要顯示折疊按鈕來隱藏多余的文本！當文本少于5行時，不顯示折疊按鈕，但我不知道如何實作。急需~希望能得到你的幫助，謝謝！

$('.show').click(function(){
  $(this).toggleClass('rotate'); 
  $('.content').toggleClass('show-all'); 
});

$('.content').click(function(){
  $('.show').toggleClass('rotate'); 
  $(this).toggleClass('show-all');
})

.content {
/*   height: auto; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;

}
.content.show-all{
  height:auto;
  overflow:visible;
  text-overflow: none;
  transition: all 2s;
}
.more {
  text-align: center;
  transition: all .2s;
}
.show{
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all .6s;
  transform:rotate(0deg);
}

.rotate{
  transform: rotate(180deg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt ugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>

uj5u.com熱心網友回復：

您必須為內容添加行高以計算內容中的行數

請檢查以下代碼片段，我希望這個答案能滿足您的要求

var targetElement = $('.content'); // get .content element as selector 
var clickElement = $('.more'); // get click .more element as selector 
var numberOfLines = 5; // set initial shown number of lines
var animationSpeed = 500; // set toggle animation speed of .content element 
var contentLineHeight = parseFloat(targetElement.css('line-height')); // get .content line height without px
var contentOuterHeight = parseFloat(targetElement.outerHeight()); // get .content height without px
var totalLineCount = contentOuterHeight/contentLineHeight; // calculate total number of lines of the content
var initialDisplayContentHeight = contentLineHeight * numberOfLines; // set height for 5 lines of contnent
var initialDisplayContentHeightWithPixel = initialDisplayContentHeight   'px'; // convert into px


// set initial height of .content element, if content length is more than 5 line
if(contentOuterHeight > initialDisplayContentHeight) {
  // set height for content 
  targetElement.css('height',initialDisplayContentHeightWithPixel);
  // show .more element
  clickElement.show();
}


// show full content for .more element click (if content height is more than 5line)
clickElement.click(function(){
  // get current height of .content
  var targetDivCurrentHeight = parseFloat(targetElement.outerHeight());
  
  // add rotate class for click element
  $(this).toggleClass('rotate'); 

  // check the content linmit and show the content 
  if (targetDivCurrentHeight != initialDisplayContentHeight) {
    targetElement.animate({ height: initialDisplayContentHeight }, animationSpeed );
  } else {
    targetElement.animate({ height: contentOuterHeight }, animationSpeed );
  }
});

.content {
/*   height: auto; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-height: 16px;
  overflow: hidden;
}

.more {
  text-align: center;
  transition: all .2s;
  display: none;
}

.show{
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all .6s;
  transform:rotate(0deg);
}

.rotate {
  transform: rotate(180deg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt ugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javascript:void(0)" class="show">V</a>
  </div>
</div>

標籤：javascript 查询 css

上一篇：洗掉每個函式中的重復項

下一篇：on()jqueryAPI的JavaScript精確模擬是什么？[復制]