JS/jQuery实现默认显示部分文字点击按钮显示全部内容

Question

jquery

Answer 1

<div class="box"> 
<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 
<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 
<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p> 
<p><strong>民间机构预报地震受网友追捧</strong></p> 
 
</div> 
<div class="box"> 
<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 
<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 
<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p> 
<p><strong>民间机构预报地震受网友追捧</strong></p> 
 
</div> <div class="box"> 
<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 
<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 
<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p> 
<p><strong>民间机构预报地震受网友追捧</strong></p> 
 
</div> 
<script>
    function show(box) {
       // var box = document.getElementById("box");
        var text = box.innerHTML;
        var newBox = document.createElement("div");
        var btn = document.createElement("a");
        newBox.innerHTML = text.substring(0, 200);
        btn.innerHTML = text.length > 200 ? "...显示全部" : "";
        btn.href = "###";
        btn.onclick = function () {
            if (btn.innerHTML == "...显示全部") {
                btn.innerHTML = "收起";
                newBox.innerHTML = text;
            } else {
                btn.innerHTML = "...显示全部";
                newBox.innerHTML = text.substring(0, 200);
            }
            return false;
        }
        box.innerHTML = "";
        box.appendChild(newBox);
        box.appendChild(btn);
    }
    var divs = document.getElementsByTagName('div')
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className == 'box') show(divs[i]);
    }
</script>

Answer 2

$(function(){
  var text = $("#div").text();
  var flag = text.length > 20 ? true : false;
  
  if(flag){
  $("#div").html("");
  $("#div").append("<p>" + text.substring(0, 20) 
+ "<span id='hide' style='display:none'>" + text.substring(20) + "</span>"
+ "<a href='javascript:;' id='open'>...显示全部</a></p>");
  }
  
  $("#open").click(function(){
  if(flag){
  $("#open").text("...隐藏");
  $("#hide").show();
  flag = false;
  } else{
  $("#open").text("...显示全部");
  $("#hide").hide();
  flag = true;
  }
  
  });
});用jquery 这样可以，我是过来，不过长度是20，不是200。