WIEN 定制

设计源于灵感,灵感始于积累。

js内容简介截取_添加展开/收回事件

做笔记是一个非常好的就习惯,之前做一个品牌简介板块,需要的点击“展开与“收回”来显示与隐藏全部简介内容。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
</head>
<body>
<p id="textMore" class="text-more">Morbi vehicula a nibh in commodo. Aliquam quis dolor eget lectus pulvinar malesuada.Suspendisse eu rhoncus ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, Etiam volutpat felis in sagittis porttitor.Class aptent taciti sociosqu ad litora torquent per conubia nostra, Etiam volutpat felis in sagittis porttitor。Morbi vehicula a nibh in commodo. Aliquam quis dolor eget lectus pulvinar malesuada.Suspendisse eu rhoncus ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, Etiam volutpat felis in sagittis porttitor.Class aptent taciti sociosqu ad litora torquent per conubia nostra, Etiam volutpat felis in sagittis porttitor</p>
<div class="banner-btn" id="bannerMore">展开更多</div>
<script type="text/javascript">
    //品牌字数限制
    function limitExcerpt(num){
      var bannerMore=document.getElementById("bannerMore");
      var postsText = document.getElementById("textMore");
      var txt = postsText.innerHTML;
      var txt_a = txt.substring(0,num-1)+"..."
      postsText.innerHTML = txt_a;
      bannerMore.onclick =function(){
        var txt_b=postsText.innerHTML;
        if (txt_b.length==num+2) {
          postsText.innerHTML=txt;
          bannerMore.innerHTML="收起"
        }else{
          postsText.innerHTML=txt_a;
          bannerMore.innerHTML="展开更多"
        }
      }
    }
    limitExcerpt(60);
</script>
<hook name="before_body_end"/>
</body>
</html>


评论