Jquery 显示/隐藏文本预览正在显示双精度

我试图在移动设备上制作文本折叠框，我遇到的问题是，它在显示更多/更少按钮的位置显示文本，双击。我怎样才能做到，文本不会显示两次

下面是带有数据js属性的文本，我正在设置标签，显示更多按钮。问题是，文本是双重的，在第二个文本之后，它会显示“显示更多/更少”按钮

<p data-js="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

---

我上传到以获得更好的印象

双文本是由于以下代码

// Show teaser text
el.innerHTML = teaserText;
el.innerHTML += el.innerHTML + '...';

+=通过将字符串连接到结果本身进行重新分配，依此类推

a+=a+“…”

等于

a=a+a+“…”

我想你是有意的

// Show teaser text
el.innerHTML = teaserText;
el.innerHTML += '...';

此外，您可能希望最初将ShowTriser设置为True，因为您在开始时隐藏了文本

---

您只需将自己的代码添加到此

 if(window.outerWidth < 991) {
// Select all text areas
// Select all text areas
var textArea = document.querySelectorAll('[data-js=content]'),    
    maxText = 100;

// For each one...
[].forEach.call( textArea, function( el ) {

  var textAreaLength = el.innerHTML.length,
    teaserText = el.innerHTML.substr(0, 100),
    fullText = el.innerHTML,
    showTeaser = false;    

  // Check to see if this text length is more
  // than the max
  if (textAreaLength >= maxText) {
    // Set flag
    showTeaser = true;

    // Set teaser text  
    el.innerHTML = teaserText;
    el.innerHTML += '...';

    // Create button
    var button = document.createElement('button');
    button.innerHTML = 'Show More';
    button.classList.add('button');
    el.appendChild(button);

    // Button click event
    button.onclick = function () {
      if (showTeaser === true) {
        // Update flag
        showTeaser = false;

        // Update button text
        this.innerHTML = 'Show Less';

        // Show full text
        el.innerHTML = fullText;

        // Re-append the button
        el.appendChild(this);
      } else {
        // Update flag
        showTeaser = true;

        // Update button text
        this.innerHTML = 'Show More';

        // Show teaser text
        el.innerHTML = teaserText;
        el.innerHTML += '...';

        // Re-append the button
        el.appendChild(this);
      }
      return false;
    };
  } else { 
    // Show full text
    el.innerHTML = fullText;
  }   

});
}

if（window.outerWidth<991）{
//选择所有文本区域
//选择所有文本区域
var textArea=document.querySelectorAll（“[data js=content]”），
maxText=100；
//对于每一个。。。
[]forEach.call（文本区域，函数（el）{
var textAreaLength=el.innerHTML.length，
steasertext=el.innerHTML.substr（01100），
全文=el.innerHTML，
showtaster=false；
//检查此文本长度是否更大
//超过最大值
如果（textAreaLength>=maxText）{
//设旗
showtaster=true；
//设置摘要文本
el.innerHTML=striesterText；
el.innerHTML+='…'；
//创建按钮
var button=document.createElement（'button'）；
button.innerHTML='显示更多'；
button.classList.add（'button'）；
el.追加子项（按钮）；
//按钮点击事件
button.onclick=函数（）{
if（showtaster===true）{
//更新标志
showtaster=false；
//更新按钮文本
this.innerHTML='Show Less'；
//显示全文
el.innerHTML=全文；
//重新添加按钮
el.儿童（本）；
}否则{
//更新标志
showtaster=true；
//更新按钮文本
this.innerHTML='显示更多'；
//显示摘要文本
el.innerHTML=striesterText；
el.innerHTML+='…'；
//重新添加按钮
el.儿童（本）；
}
返回false；
};
}否则{
//显示全文
el.innerHTML=全文；
}   
});
}

---

这不是最干净的解决方案，因为当有人调整浏览器的大小时，它不会隐藏或显示它。用户必须重新加载其页面。

您能否共享任何代码片段或工作提琴以获得更多澄清？谢谢我更新了我的问题。帮了我很多忙。你知道只在移动设备上显示此功能的方法吗？例如，直到最大宽度为768？顺便说一句，我用一些lorem ipsum文本更新了我的JSFIDLE，如果你也可以的话，那就太好了。我在发布时忘记了，否则我们会遇到重复内容的问题。是的，一个肮脏的方法是在第一次加载文档时，作为事件监视宽度的变化。然后检查大小条件并设置可折叠文本。如果条件不匹配，则显示全文并隐藏按钮，否则折叠文本并显示按钮。以下是如何使用调整事件大小：

 if(window.outerWidth < 991) {
// Select all text areas
// Select all text areas
var textArea = document.querySelectorAll('[data-js=content]'),    
    maxText = 100;

// For each one...
[].forEach.call( textArea, function( el ) {

  var textAreaLength = el.innerHTML.length,
    teaserText = el.innerHTML.substr(0, 100),
    fullText = el.innerHTML,
    showTeaser = false;    

  // Check to see if this text length is more
  // than the max
  if (textAreaLength >= maxText) {
    // Set flag
    showTeaser = true;

    // Set teaser text  
    el.innerHTML = teaserText;
    el.innerHTML += '...';

    // Create button
    var button = document.createElement('button');
    button.innerHTML = 'Show More';
    button.classList.add('button');
    el.appendChild(button);

    // Button click event
    button.onclick = function () {
      if (showTeaser === true) {
        // Update flag
        showTeaser = false;

        // Update button text
        this.innerHTML = 'Show Less';

        // Show full text
        el.innerHTML = fullText;

        // Re-append the button
        el.appendChild(this);
      } else {
        // Update flag
        showTeaser = true;

        // Update button text
        this.innerHTML = 'Show More';

        // Show teaser text
        el.innerHTML = teaserText;
        el.innerHTML += '...';

        // Re-append the button
        el.appendChild(this);
      }
      return false;
    };
  } else { 
    // Show full text
    el.innerHTML = fullText;
  }   

});
}