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

lp_234291053 2014-07-03 10:29:25

<div id="box"> 

<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 

<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 

<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p> 

<p><strong>民间机构预报地震受网友追捧</strong></p> 



</div> 

<script> 

function show(){ 

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); 

} 

} 

box.innerHTML = ""; 

box.appendChild(newBox); 

box.appendChild(btn); 

} 

show(); 

</script>

这段代码现在只有一个ID，如何修改下可以在多条列表下实现功能呢？

...全文

3130 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Mop.Duan 2016-10-24

打赏
举报

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

1210fei 2015-09-24

打赏
举报

挺不错的，一定好好研究

胖子会疯狂 2014-07-07

打赏
举报


$(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。

Go 旅城通票 2014-07-03

打赏
举报


<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>