javascript展开与收起效果

最新推荐文章于 2024-06-28 22:39:15 发布

fordouble

最新推荐文章于 2024-06-28 22:39:15 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签：展开与收起效果

本文链接：https://blog.csdn.net/fordouble/article/details/54837667

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的做了一个显示与隐藏的效果，当然有一些坑点。

比如喜欢上了在标签内部绑定DOM事件，而不是在javascript内绑定事件。

好处是只需要写好函数就可以绑定引用了；

在修改css样式时，正确代码应该是：

document.getElementById("hidbox").style.display="block";
我的代码是：
document.getElementById("hidbox").style=“display：block";

还有，在行内添加javascript时，正确的代码应该是：

href="javascript:showbox()"

我的代码是：

href="script:showbox()"

下面附上慕课的源码：


 
 <script type="text/javascript">
  function
 showdiv() {
  document.getElementById("hpn").style.display = "block";
  // document.getElementById("pn").style.height='80px';
  document.getElementById("strHref").href
 = "javascript:hidediv();";
  document.getElementById("strHref").innerHTML = "收起-";
  }
  function
 hidediv() {
  document.getElementById("hpn").style.display = "none";
  // document.getElementById("pn").style.height='60px';
  document.getElementById("strHref").href
 = "javascript:showdiv();";
  document.getElementById("strHref").innerHTML = "更多选项+";
  }
  </script>
  </head>
  <body>
  <div>
  <div id="pn">
  <p>
  手机
 - 商品筛选</p>
  <p>
  网络： 移动4G（TD-LTE ） 联通4G（TD-LTE）
 联通3G（WCDMA）
  </p>
  <div id="hpn" style="display: none">
  <p>
  价格： 5000以上 4000-4999 3000-3999 2000-2999
  </p>
  <p>
  特点：
 JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏
  </p>
  </div>
  </div>
  <p class="slide">
  <a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a></p>
  </div>

fordouble

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

<script type="text/javascript">
	function showdiv() {
	document.getElementById("hpn").style.display = "block";
	// document.getElementById("pn").style.height='80px';
	document.getElementById("strHref").href = "javascript:hidediv();";
	document.getElementById("strHref").innerHTML = "收起-";
	}
	function hidediv() {
	document.getElementById("hpn").style.display = "none";
	// document.getElementById("pn").style.height='60px';
	document.getElementById("strHref").href = "javascript:showdiv();";
	document.getElementById("strHref").innerHTML = "更多选项+";
	}
	</script>
	</head>
	<body>
	<div>
	<div id="pn">
	<p>
	手机 - 商品筛选</p>
	<p>
	网络：移动4G（TD-LTE ）联通4G（TD-LTE）联通3G（WCDMA）
	</p>
	<div id="hpn" style="display: none">
	<p>
	价格： 5000以上 4000-4999 3000-3999 2000-2999
	</p>
	<p>
	特点： JDPhone计划 "0"元购机防水长待机 1080P全高清屏
	</p>
	</div>
	</div>
	<p class="slide">
	<a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a></p>
	</div>