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

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Miss-Ye/archive/2012/03/20/2407493.html

文章标签：

#javascript #ViewUI

文章详细介绍了如何使用Jquery和JavaScript实现点击元素隐藏和显示的效果，包括CSS样式设置、HTML结构搭建及两种技术的实现方式对比。

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

　　今天看完一些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()"

　　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();
　　　　　　　　　　　　}
　　　　　　　　　　})
　　　　　　　　})

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

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

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

　　　　　　　　})
　　　　　　})

转载于:https://www.cnblogs.com/Miss-Ye/archive/2012/03/20/2407493.html