JS 展开/收起按钮显示隐藏文字示例

人气：2253 时间：2018-10-30

这篇文章主要为大家详细介绍了JS 展开/收起按钮显示隐藏文字示例，具有一定的参考价值，可以用来参考一下。

感兴趣JS 展开/收起按钮显示隐藏文字示例的小伙伴，下面一起跟随四海网的小编罗X来看看吧。<br>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{padding:0;margin: 0;}
		.pn{width:400px; margin: 200px auto 0; background-color: #ddd; text-align: center;padding:0 100px;}
		
		.slide a{display: block;width: 100px;height: 30px;line-height:30px; text-align:center;margin:0 auto;background-color: #f00; text-decoration: none;color:#fff;}
	</style>
</head>

<body>
	<div class="pn">
		<p>简介</p>
		<p>女娃</p>
		<div class="hpn" id="mm" style="display:none;">
			<p>特点：人长得很特很特点</p>
			<p>爱好：看电影睡觉爬山</p>
		</div>
	</div>
	<p class="slide"><a href="javascript:showdiv();" id="strhref" class="btn-show">展开</a></p>
	<script type="text/javascript">
		function showdiv(){
			document.getElementById('mm').style.display = 'block';
			document.getElementById('strhref').innerHTML="收起";
			document.getElementById('strhref').href="javascript:hidediv()";
		}
		function hidediv(){
			document.getElementById('mm').style.display = 'none';
			document.getElementById('strhref').innerHTML="展开";
			document.getElementById('strhref').href="javascript:showdiv()";
 
		}
	</script>
</body>
</html>

本文来自：http://www.q1010.com/174/2813-0.html

注：关于JS 展开/收起按钮显示隐藏文字示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：显示文字

您可能感兴趣的文章

上一篇：js 文字超出部分隐藏、点击显示更多示例

下一篇：JS 逐个访问URL的每个查询字符串参数