【原创】原生js实现显示与隐藏

网页上某个对象(DOM)的显示与隐藏是应用场合非常多的功能,我以前一直用jQuery的 hide(),show()或toggle()函数来实现,最近总觉得JQ比较庞大,而我需要的特效又不多,是不是可以把这个功能简单地用原生的javascript实现算了,这样就有了这样一篇文章。

希望能够帮到你,为了一个简单的特效引入jQuery确实不合算啊

jQuery的实现方法

$(function(){
    $(".on-off-item").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})
});
//或者:
$(function(){
    $(".on-off-item").bind("click",function(){
	   $(this).next().toggle();
	})
});
	

以上大概实现意思是,当click那些class=“on-off-item”的东西时,代码会判断这个东西后一个东西是否可见,如果可见则隐藏,否则则显示

原生javascript的实现

为了避免jquery,我们也可以用原生代码实现,其实就一句话,效果在这里:http://htmlandcss.com/lab/004.php

<button type="button" onclick='document.getElementById("my-day").style.display = document.getElementById("my-day").style.display=="none"?"block":"none";'>点击这里显示或者隐藏日期块</button>

这个button应该是可以拿来就用的,直接copy到你自己的网页里面,把那个"my-day",改成你想显示隐藏的对象ID,就可以了。。可以称之为green and self-contained,绿色自治的,这个词不晓得是不是我发明的,我的意思就好像是那种所谓绿色软件,copy过来就能执行能用,不会有太多依赖,也不会影响其他对象。

完整的例子我写在005.php代码里了,大家可以参考一下,效果演示在这里:http://htmlandcss.com/lab/005.php

<!--005.php,这段代码演示使用原生的javascripts来实现某个div的显示与隐藏-->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML and CSS</title>
<style type="text/css">
body {margin:0;padding:0;font: 2em 微软雅黑;color:#666;background:#666;line-height:2em}
#main {text-align:center;width:50%; margin:8% auto;background:white;padding:5%;}
#my-day{display:block;}
</style>
</head>
<body>
<div id="main">
<p>Hello World</p>
<p>HTML & CSS欢迎您</p>
<button type="button" onclick=" js_show()">点击这里显示日期块</button>
<button type="button" onclick=" js_hide()">点击这里隐藏日期块</button>
<button type="button" onclick=" js_toggle()">点击这里显示或者隐藏日期块</button>
<br/>
<button type="button" onclick='document.getElementById("my-day").style.display = "block";'>点击这里显示日期块</button>
<button type="button" onclick='document.getElementById("my-day").style.display = "none";'>点击这里隐藏日期块</button>
<button type="button" onclick='document.getElementById("my-day").style.display = document.getElementById("my-day").style.display=="none"?"block":"none";'>点击这里显示或者隐藏日期块</button>
<?php echo '<p id="my-day"> ⛄ 今天是'.date("Y-m-d").',距离'.date('Y',strtotime('+1 year')).'新年还有'.ceil((strtotime(date('Y',strtotime('+1 year')).'-01-01') - time())/60/60/24).'天 ⛄</p>';?>
</div>
<script>
function js_show(){document.getElementById("my-day").style.display = "block";}
function js_hide(){document.getElementById("my-day").style.display = "none";}
function js_toggle(){document.getElementById("my-day").style.display = document.getElementById("my-day").style.display=="none"?"block":"none";}
</script>
</body>
</html>