Question

我正在研究jQuery中小的 Show more / Show less 脚本。

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;

  var lessText = function() {
    while (el.scrollHeight > el.offsetHeight) {
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  lessText();
  btn.on('click', function(){
  	if($(this).hasClass('show-text')){
    	moreText();
    } else {
    	lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>

此脚本有一个我很容易发现的错误：单击“显示更多”后，整个文本按预期的 but 显示，同时单击同一按钮，并显示“显示较少”作为文本，那么框中只剩下“ ...”省略号。

我在做什么错了？

Answer 1

在moreText函数中，您将元素的高度设置为auto：

el.style.height = "auto";

在lessText函数中还原此错误，即可修复您的错误。

el.style.height = null;

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;
  
  var init = function() {
    while (el.scrollHeight > el.offsetHeight) {
   
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }
  
  var lessText = function() {
    el.style.height = null;
    el.innerHTML = wordArray.join(' ') + '...';   
    btn.removeClass('hide-text').addClass('show-text').text("Show more");    
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  init();
  btn.on('click', function(event) {
     event.preventDefault();
  	if($(this).hasClass('show-text')){
    	moreText();
    } else {
    	lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>

自定义截断功能删除所有初始文本

1 个答案: