如何使用 HTML、javascript 在页面中添加更多阅读内容 [关闭]答案

【问题标题】：how to add read more in a page by using HTML,javascript [closed]如何使用 HTML、javascript 在页面中添加更多阅读内容 [关闭]
【发布时间】：2016-12-01 14:53:57
【问题描述】：

我需要创建一个显示更多/更少文本的函数，但只使用 JavaScript 和 HTML。我不能使用任何额外的库，例如 jQuery，也不能使用 CSS。

【问题讨论】：

那么你的问题是什么？
那里有很多东西，我很确定。没有看到任何代码，表明没有为此付出太多努力。这个问题太宽泛了；告诉我们你尝试了什么。 Stack 不是为你寻找东西或编写代码。
我的 html 代码中有一个文本，当我按下 readmore 这个词时我需要一个 javascript 函数，它会显示文本
Creating a "read more" link that extends the content on the page的可能重复
到目前为止你做了什么？

标签： javascript php html web

【解决方案1】：

在没有适当解释的情况下给出完整的解决方案并不是一件好事。所以我只做了一个半成品的解决方案。

html:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula id neque pharetra luctus. Nulla in luctus tortor. Nullam non lectus tellus. Pellentesque maximus rutrum dolor, aliquet dapibus lectus dignissim eu. Fusce non blandit risus. Suspendisse fermentum ipsum justo, vitae finibus risus convallis non. Proin euismod euismod orci, suscipit sodales sem fringilla sed. Maecenas iaculis ac elit cursus efficitur. Vivamus at bibendum purus, non molestie libero. Donec fermentum ante non diam bibendum, nec consectetur orci gravida. APPLES FOR SALE!  <br>
<a href="#" id="js-more">Show more!</a>
  <span id="js-hidden">  
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque faucibus felis eget auctor ultricies. Cras vel posuere lorem. Etiam tincidunt maximus magna. Phasellus eu nisi quam. Curabitur dictum felis ut vulputate rhoncus. Aliquam et odio justo. Morbi sit amet lectus sit amet nulla lobortis tempor et et nulla. Proin eget posuere nunc, ac tristique turpis. Curabitur elementum maximus dolor, ac vehicula dui dictum at. Integer libero nisi, pulvinar a turpis pretium, rhoncus suscipit erat. In auctor odio ut odio aliquam malesuada at at quam. Fusce lobortis, diam euismod tempor luctus, diam mi venenatis lectus, sed tempus neque risus et neque. Fusce id vestibulum nunc, at gravida leo. Morbi fringilla dolor ac molestie aliquet.
  </span> 
<p>

js: var hiddenText = document.getElementById('js-hidden'); var toggleButton = document.getElementById('js-more'); hiddenText.style.display = '无'; hiddenText.className = '隐藏';

  function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }

  toggleButton.onclick = function toggleText(){
    console.log("click happens");

    if(hasClass(hiddenText, 'hidden') == 1)
    {
        console.log("true");
      hiddenText.style.display = 'block'; 
      hiddenText.className = '';     
    }
    else
    {
        console.log("false");
      hiddenText.style.display = 'none'; 
      hiddenText.className = 'hidden'; 
    }

    return false;
  }

https://jsfiddle.net/j769d4tp/9/

【讨论】：