Jquery与Javascript记录（一）——单击隐藏/显示

　　刚了解完一些基础知识，就迫不及待地想做一些效果，貌似有点急功近利了。不过为了早日从菜鸟变成菜鸟战斗机，快步走走吧。

　　今天看完一些Jquery的Demo，确实是Write less了，但是太投入Jquery又怕走不出来，于是还是顺道把JS也写了一下Demo，都是实现点击隐藏/显示。

　　效果图：

　　　　　　

　　css代码：　　　　

　　　　#menu{width:350px;font-size:12px;border:1px solid #000000;}
　　　　#head1{font-weight:bold;font-size:16px;background:#CCCCCC;border-bottom:1px solid #000000;padding:2px;cursor:pointer;}
　　　　#content1{line-height:1.5em;text-indent:2em;display:none;padding:2px;}

 

　　html代码：　

　　　　<div id="menu">
　　　　　　<div id="head1">　Jquery　</div>

　　　　　　<div id="content1">
　　　　　　　　jQuery…………………………
　　　　　　</div>
　　　　</div>

　　JS实现：　　

　　　　head1处加上onclick="showContent()"

　　　　function showContent(){
　　　　　　var content = document.getElementById('content1');
　　　　　　if(content.style.display == 'none'){
　　　　　　　　content.style.display = 'block';
　　　　　　}else{
　　　　　　　　content.style.display = 'none';
　　　　　　}
　　　　}

　　JQuery实现：（这里手多多用了不同的书写方法，原理都是一样的。）

　　　　1.　　　$(function(){

　　　　　　　　　　$("#head1").bind("mouseover",function(){
　　　　　　　　　　　　var $content = $(this).next();
　　　　　　　　　　　　if($content.is(":visible")){
　　　　　　　　　　　　　　$content.hide();
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　$content.show();
　　　　　　　　　　　　}
　　　　　　　　　　});
　　　　2.　　　　　$("#head1").mouseout(function(){
　　　　　　　　　　　　var $content = $(this).next();
　　　　　　　　　　　　if($content.is(":visible")){
　　　　　　　　　　　　　　$content.hide();
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　$content.show();
　　　　　　　　　　　　}
　　　　　　　　　　})
　　　　　　　　})

　　　　3.　　　　

　　　　　　$(function(){
　　　　　　　　$("#head1").toggle(function(){
　　　　　　　　　　$(this).next().show();
　　　　　　　　},function(){
　　　　　　　　　　$(this).next().hide();
　　　　　　　　})
　　　　　　})

　　　　4. 　　　　

　　　　　　$(function(){
　　　　　　　　$("#head1").hover(function(){
　　　　　　　　　　$(this).next().show();
　　　　　　　　},function(){

　　　　　　　　　　$(this).next().hide()

　　　　　　　　})
　　　　　　})