JQuery点滴之toggle

核心提示： 显示隐藏的代码可以这样（事实上这段代码是有问题的，但是居然这样写也能实现要的效果）：1:<scripttype="text/javascript">2:$(3:function(event){4:functionOverOut(event){5:$("#

显示隐藏的代码可以这样（事实上这段代码是有问题的，但是居然这样写也能实现要的效果）：

　　　1:　　　　　　<script　type="text/javascript">
　　　2:　　　　　　　　　　$(
　　　3:　　　　　　　　　　function(event)　{
　　　4:　　　　　　　　　　　　　　function　OverOut(event)　{
　　　5:　　　　　　　　　　　　　　　　　　$("#DivToggle").toggle(600);
　　　6:　　　　　　　　　　　　　　}
　　　7:　　　　　　　　　　　　　　$("#DivToggle").toggle(function()　{
　　　8:　　　　　　　　　　　　　　　　　　$("#btnShow").click(OverOut);
　　　9:　　　　　　　　　　　　　　},　function()　{
　　10:　　　　　　　　　　　　　　　　　　$("#btnShow").click(OverOut);
　　11:　　　　　　　　　　　　　　});
　　12:　　　　　　　　　　}
　　13:　　　　　　　　　　);
　　14:　　　　　　</script>

回过头来看这段代码觉得很有问题，本身toggle(fn,fn,…)是用来给指定的元素加上Click事件，然后再对这个元素循环做toggle

里面的那些函数。突然感觉有点搅在那里了。像麻花一样。望牛牛能解释一下。

这样为了演示toggle的轮循函数的效果就没有办法，通过单击按钮，再改变Div的样式了。

改变DIV样式的代码这样：

　　　1:　　　　　　<script　type="text/javascript">
　　　2:　　　　　　　　　　$(
　　　3:　　　　　　　　　　function(event)　{
　　　4:　　　　　　　　　　　　　　function　OverOut(event)　{
　　　5:　　　　　　　　　　　　　　　　　　$("#DivToggle").toggle(600);
　　　6:　　　　　　　　　　　　　　}
　　　7:　　　　　　　　　　　　　　$("#DivToggle").toggle(function()　{
　　　8:　　　　　　　　　　　　　　　　　　$(this).click(function()　{　$(this).css("background",　"Blue");　});
　　　9:　　　　　　　　　　　　　　},　function(event)　{
　　10:　　　　　　　　　　　　　　　　　　$(this).click(function()　{　$(this).css("background",　"Green");　});
　　11:　　　　　　　　　　　　　　});
　　12:　　　　　　　　　　}
　　13:　　　　　　　　　　);
　　14:　　　　　　</script>

到这里我突然想到，要实现以上的效果，那就直接把事件加载到按钮上，也就是”btnShow”上面也就是先隐藏显示，然后改变DIV的样式。详细的代码如下：

　　　1:　　　　　　<script　type="text/javascript">
　　　2:　　　　　　　　　　$(
　　　3:　　　　　　　　　　function(event)　{
　　　4:　　　
　　　5:　　　　　　　　　　　　　　function　OverOut(event)　{
　　　6:　　　　　　　　　　　　　　　　　　$("#DivToggle").toggle(600);
　　　7:　　　　　　　　　　　　　　}
　　　8:　　　
　　　9:　　　　　　　　　　　　　　$("#btnShow").toggle(
　　10:　　　　　　　　　　　　　　　　　OverOut,　OverOut,
　　11:　　　　　　　　　　　　　　　　　function()　{　$("#DivToggle").css({　"background":　"Green"　});　},
　　12:　　　　　　　　　　　　　　　　　function()　{　$("#DivToggle").css({　"background":　"Blue"　});　}
　　13:　　　　　　　　　　　　　　);
　　14:　　　
　　15:　　　　　　　　　　}
　　16:　　　　　　　　　　);
　　17:　　　　　　</script>

这样能实现以上要的效果，就是先隐藏，再显示，再改变样式。