gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:26:32 24 4
gpt4 key购买 nike

我需要一个用纯 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>

最佳答案

这是一个纯 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>

关于javascript - 使用纯 Javascript 显示更多/更少,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45133079/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com