繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery toggle使用分析
- Javascript
- QQ邮箱的一个文本编辑器代码
- Z-Blog中用到的js代码
- 绝对经典的滑轮新闻显示(javascript+css)实现
- 用js实现的仿sohu博客更换页面风格（简单版）
- 仿Vista进程条效果
- 用Javascript判断图片是否存在，不存在则显示默认图片的代码
- 用JQuery 实现的自定义对话框
- jQuery使用手册之三 CSS操作
- 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
- 贴图转换+转贴工具用到的js代码超级推荐
- 超级简单的图片防盗(HTML),好用
- 现代 javscript 编程 资料
- 超级可爱纯js网页时钟
- Dojo之路:如何利用Dojo实现Drag and Drop效果
- AJAX架构之Dojo篇
- 发两个小东西，ASP/PHP 学习工具。 用JavaScript写的
- 使用prototype.js 的时候应该特别注意的几个问题.
- 一个已封装好的漂亮进度条
- 漂亮的widgets，支持换肤和后期开发新皮肤
- 用javascript实现的仿Flash广告图片轮换效果
Javascript 中的 JQuery toggle使用分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 309 ::
收藏到网摘: n/a
今天针对这个JQuery里面的toggle聊几句，文章中涉及到了一些问题望牛牛们能帮忙解惑一下。 今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。
比如：对一个按钮的点击事件和一个DIV的背景，点击一次按钮，将DIV的背景显示为蓝色，点击第二次的时候要将DIV的
背景色改为黑色。
我们定义的HTML代码如下：
<body>
<input type="button" id="btnShow" value="Toggle"/>
<div id="DivToggle">此处显示 id "DivToggle" 的内容</div>
</body>
定义的最初的样式如下：
复制代码 代码如下:
#DivToggle {
height: 150px;
width: 200px;
margin: 50px;
background-color: #6CC;
}
在toggle(fn,fn,….);先明白一个toggle()的函数，主要是用来切换元素的显示状态。如果一个元素是显示的，那么调用.toggle()之后就变得隐藏了。
JQuery代码：
复制代码 代码如下:
<script type="text/javascript">
$(
function() {
$("#btnShow").click(function(event) {
$("#DivToggle").toggle();
});
}
);
</script>
点击按钮之后DIV隐藏，再次点击DIV显示，然后循环。
这里我们可以手动设置元素的显示和隐藏，显示：toggle(true);隐藏：toggle(false);
我们还可以为元素的隐藏和显示设置速度。
$("#DivToggle").toggle(600);
当然到这里我们可以想到我们经常在网页中碰到的将鼠标移上去显示出来，然后鼠标移开则隐藏掉的效果。
这里当然用到了一个hover(fnover,fnout)事件。我们只要将fnover,和fnout设置为以上的toggle(600)即可;
这里的fnover是鼠标移上去的事件函数， fnout是鼠标移开的事件函数。
我们将toggle(600)单独设置为一个函数来调用，这样看起来代表比较易读。
复制代码 代码如下:
<script type="text/javascript">
$(
function(event) {
$("#btnShow").hover(OverOut, OverOut);
function OverOut(event) {
$("#DivToggle").toggle(600);
}
}
);
</script>
这样我们把鼠标移动到按钮上面，然后移开，就可以看到DivToggle的隐藏和显示的效果了。
为了演示toggle(fn,fn,…)是轮换操作的，我们使用上面的一个函数，然后再加一个使用btnShow的Click事件先隐藏显示DIV,然后该表DIV的样式。
显示隐藏的代码可以这样（事实上这段代码是有问题的，但是居然这样写也能实现要的效果）：
复制代码 代码如下:
<script type="text/javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$("#btnShow").click(OverOut);
}, function() {
$("#btnShow").click(OverOut);
});
}
);
</script>
回过头来看这段代码觉得很有问题，本身toggle(fn,fn,…)是用来给指定的元素加上Click事件，然后再对这个元素循环做toggle
里面的那些函数。突然感觉有点搅在那里了。像麻花一样。望牛牛能解释一下。
这样为了演示toggle的轮循函数的效果就没有办法，通过单击按钮，再改变Div的样式了。
改变DIV样式的代码这样：
复制代码 代码如下:
<script type="text/javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$(this).click(function() { $(this).css("background", "Blue"); });
}, function(event) {
$(this).click(function() { $(this).css("background", "Green"); });
});
}
);
</script>
到这里我突然想到，要实现以上的效果，那就直接把事件加载到按钮上，也就是”btnShow”上面也就是先隐藏显示，然后改变DIV的样式。详细的代码如下：
复制代码 代码如下:
<script type="text/javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#btnShow").toggle(
OverOut, OverOut,
function() { $("#DivToggle").css({ "background": "Green" }); },
function() { $("#DivToggle").css({ "background": "Blue" }); }
);
}
);
</script>
这样能实现以上要的效果，就是先隐藏，再显示，再改变样式。
评论 (0) All
