下面这一段代码,主要依靠JS代码,实现了点击一个链接,指定的区域就显示,再点击一下,指定的区域就隐藏,适合需要折叠显示或隐藏的地方使用。
在使用这段代码之间,首先需要引入jquery。
引入之后再添加如上代码即可:
1、点击部分:
<div><a href="javascript:ClickToDisplay();" id="region">显示</a></div>
2、js核心部分:
<script type="text/javascript" charset="utf-8">//<![CDATA[var changeMsg = "显示";var closeMsg = "关闭";function ClickToDisplay() { jQuery("#todisplay").slideToggle("slow", function(){ if ( jQuery("#todisplay").CSS("display") == "none" ) { jQuery("#region").text(changeMsg); } else { jQuery("#region").text(closeMsg); } });}jQuery(document).ready(function(){ jQuery("#todisplay").hide();});//]]></script>
3、要显示和隐藏的区域:
<div id="todisplay">test</div>
上面代码主要是判断css的id,因为id唯一,别把id搞错了。
未经允许不得转载! 作者:小秋同学,转载或复制请以超链接形式并注明出处XQ 筑站派。
原文地址:《js实现点击显示和隐藏特效代码》发布于:2020-12-27 09:13:09