javascript - 使用纯 Javascript 显示更多/更少

Question

我需要一个用纯 JavaScript 和 CSS 编写的简单阅读更多/更少的示例。如何将这个 jQuery 示例转换为纯 Javascript？ https://jsfiddle.net/ngaffer/s75zj385/2/

我在一个页面上生成了几个长段落。为了缩短页面以尽量减少滚动，我想隐藏每个段落的大部分内容并显示一个“阅读更多”链接。单击链接时，该按钮将显示隐藏文本并将链接更改为“少读”。

<section>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <a class="show-more" href="#">Show more</a>
</section>

<section>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <a class="show-more" href="#">Show more</a>
</section>

<script>
$("a.show-more").on("click", function() {
    var $this = $(this); 
    var $content = $this.prev("div.content");
    var linkText = $this.text().toUpperCase();    

    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    };

    $this.text(linkText);
});
</script>

<style>
.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}
.showContent {
    line-height: 1em;
    height: auto;
}
</style>

Answer 1

这是一个纯 JS 代码，它根据类和动画 css 技巧选择 anchor :

var anchrorClassShow=document.getElementsByTagName('a');
for(var i=0;i<anchrorClassShow.length;i++){  
  if(anchrorClassShow[i].className!=='show-more'){    
    anchrorClassShow[i].remove();
  }  
}


 
for(var i=0;i<anchrorClassShow.length;i++){
  anchrorClassShow[i].addEventListener('click', function(){
  var parentDiv=this.parentElement;  
  if(parentDiv.children[0].className.match(/hideContent/g)){
     parentDiv.children[0].className='content showContent';
  }else{
     parentDiv.children[0].className='content hideContent';
  }
});
}

.hideContent {
    max-height: 2em;
    transition: max-height 0.15s linear;
    overflow: hidden;
    background: #d5d5d5;
    
}
.showContent {
    max-height: 500px;
    transition: max-height 0.35s linear; 
    
}

<section>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <a class="show-more" href="#">Show more</a>
</section>

<section>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <a class="show-more" href="#">Show more</a>
</section>