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技巧选择锚点：

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>

Answer 2

这样的转换不是一个非常漫长的过程。

Here是一个非常有用的资源，知道如何用普通（vanilla）javascript替换常见的jquery代码。

与此同时，我也冒昧地在new fiddle修改你的javascript。

var click_event = function() {
    var linkText = this.innerHTML.toUpperCase();
    if (linkText === "SHOW MORE") {
        this.innerHTML = "Show less";
        this.previousElementSibling.classList.remove("hideContent");
        this.previousElementSibling.classList.add("showContent");

    }
    else {
        this.innerHTML = "Show more";
        this.previousElementSibling.classList.remove("showContent");
        this.previousElementSibling.classList.add("hideContent");
    }
};

var elements = document.getElementsByClassName("show-more");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', click_event, false);
}

此代码实现了vanilla JS中的所有基本功能。但是，我已经省去了400毫秒的时间延迟，我认为这对你来说是一个非常有趣的练习。我希望这能在未来的活动中帮助你。

使用纯Javascript显示更多/更少

2 个答案: