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)

相关推荐

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • jquery中交替点击事件toggle方法的使用示例

    复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JQury slideToggle闪烁问题及解决办法

    一.解决方法 在页面配置<!DOCTYPE />如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 其中 "http://www.w3.org/TR/html4/loose.dtd" 是必需的,如果少了这句话仍然会有闪烁的问题,具体为什么我不太清楚 我查了下,这个句

  • ionic实现带字的toggle滑动组件

    ionic实现带字的toggle滑动组件

    前言 由于项目中需要带字的toggle滑动组件,而ionic提供的是这样的: 实际项目中需要这样子的: 在网上找了下其他的实现,感觉没得类似的,也没发现合适的,于是自己试着定义了一个凑合着用.先上效果图 看效果图边缘有模糊锯齿现象,可能是由于像素的影响,在android和ios手机上表现非常流畅. 实现代码 其实实现起来也很简单,主要是算好滑块的位置,滑动用的是css的transform. css用到的类如下: .switch_search{ position:relative;display:

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

  • ionic实现可滑动的tab选项卡切换效果

    ionic实现可滑动的tab选项卡切换效果

    利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化.简略了代码,有需要的同学可以看看. 先来张效果图: 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3

  • ionic实现滑动的三种方式

    在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动.本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式.实现滑动的基本原理,有两个容器A.B,假如A在外层,B在内层:外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动. 实现方式 1). ion-scroll 利用ionic自带的滑动指令 <ion-view view-title="Dashboard"> <ion-content class="padding

  • Android控件之ToggleButton的使用方法

    Android控件之ToggleButton的使用方法

    ToggleButton的状态只能是选中和未选中,并且需要为不同的状态设置不同的显示文本. 以下案例为ToggleButton的用法 目录结构 main.xml布局文件 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    androi

随机推荐