logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

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>


Comments 0