Question

我正在寻找一种解决方案，以增加在我的长文本（角度为5）中读取越来越少的按钮，或者我需要将此代码与Js转换为角度6：

readMoreButton.js：

$(document).ready(function(){
    $('.service-info').hide();
    $('.read-less').hide();
      $('.read-more').click(function(){
          $(this).hide();
          $(this).next().show();
          $(this).next().next().show();
        })
      $('.read-less').click(function(){
        $(this).prev().hide();
          $(this).prev().prev().show();
          $(this).hide();
      })
  })

readMoreButton.html

<a class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
  </div>
<a class="read-less">Read Less</a>


<div class="separator"><hr></div>


<a class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>

  </div>
<a class="read-less">Read Less</a>

Answer 1

我如何实现的

第1步：

<button type="button" (click)="alterDescriptionText()">
   { showShortDesciption ? 'SHOW ALL': 'SHOW LESS' }}
 </button>

步骤2：（在您的.component.ts文件中）

 showShortDesciption = true

 alterDescriptionText() {
    this.showShortDesciption = !this.showShortDesciption
 }

第3步：

<div [ngClass]="{'show-less': showShortDesciption}">
      <!-- Your Text Here -->
</div

第4步：

.show-less {
    height: 4rem;
    overflow: hidden;
    padding: 1rem;
}

基本上我是在单击按钮时更改div的高度

如何使用-了解更多带角度5的阅读/更少按钮

1 个答案: