JS实现文章的显示隐藏

最新推荐文章于 2022-08-30 18:39:49 发布

兔斯基的小提琴

最新推荐文章于 2022-08-30 18:39:49 发布

阅读量822

点赞数

分类专栏： HTML JS 文章标签： HTML JS

本文链接：https://blog.csdn.net/qq_39672686/article/details/79059303

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文章显示和隐藏</title>
		<style type="text/css">
			div{
				border: 1px solid #A0C7FD;
				padding: 10px;
			}
			a{
				color: #0062CC;
			}
			
		</style>
	</head>

	<body>
		<p>原文：唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。 问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。 东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。 万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。 归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。 爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜贴花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。 雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？</p>
		<br /><br />
		<div id="box">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			
			window.οnlοad=function(){
				
				
				var content="唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。 问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。 东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。 万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。 归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。 爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜贴花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。 雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？";
				
				$("#box").html("<p>"+cutstr(content,100)+"</p>");
			}
			
			
			
			/** 
			 * js截取字符串，中英文都能用 
			 * @param str：需要截取的字符串 
			 * @param len: 需要截取的长度 
			 */
			function cutstr(centent, len) {
				var str_length = 0;
				var str_len = 0;
				str_cut = new String();
				str_len = centent.length;
				for(var i = 0; i < str_len; i++) {
					a = centent.charAt(i);
					str_length++;
					if(escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if(str_length >= len) {
						str_cut = str_cut.concat("...<br /><a  class='text-centent-show'  data-show='" + centent + "'  data-hide='" + str_cut + "'  show='0'  οnclick='showAll(this)'>全文</a>");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if(str_length < len) {
					return centent;
				}
			}
			
			
			//显示全文
		function showAll(t) {

			var is_show = $(t).attr("show");
			//0：隐藏，1：显示
			if(is_show<1){
				//隐藏-->显示
				$(t).text("收起");
				$(t).attr("show",1);
				var content = $(t).attr("data-show");//获取全文
				var html=$(t).prop('outerHTML');//读取元素
				$(t).parent().html(content+"<br />"+html);//更改显示内容
				//console.log(html);
				//alert("全文");
				//console.log(content);
			}else{
				//显示-->隐藏
				$(t).text("全文");
				$(t).attr("show",0);
				var content = $(t).attr("data-hide");//获取收缩内容
				var html=$(t).prop('outerHTML');//读取元素
				$(t).parent().html(content+"<br />"+html);//更改显示内容
				//alert("收起");
				//console.log(content);
			}
		}
			
		</script>
	</body>

</html>

兔斯基的小提琴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现文章的显示隐藏

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文章显示和隐藏&lt;/title&gt; &lt;style type="text/css"&gt; div{ border: 1px solid
复制链接

扫一扫