现在的位置: 主页 > 公司荣誉 > 文章列表

JQuery toggle使用分析

作者:沈阳市沈河区金瑞龙美术社 来源:www.jrlgg.com 发布时间:2017-09-12 15:59:47
 

JQuery toggle使用分析

今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。
比如:对一个按钮的点击事件和一个DIV的背景,站群系统,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的
背景色改为黑色。
我们定义的HTML代码如下:
<body>
<input type="button" id="btnShow" value="Toggle"/>
<div id="DivToggle">此处显示 id "DivToggle" 的内容</div>
</body>
定义的最初的样式如下:
[html]
#DivToggle {
height: 150px;
width: 200px;
margin: 50px;
background-color: #6CC;
}

#DivToggle {
height: 150px;
width: 200px;
margin: 50px;
background-color: #6CC;
}

在toggle(fn,fn,….);先明白一个toggle()的函数,主要是用来切换元素的显示状态。如果一个元素是显示的,那么调用.toggle()之后就变得隐藏了。

JQuery代码:


[html]
<script type="text/javascript">
$(
function() {
$("#btnShow").click(function(event) {
$("#DivToggle").toggle();
});
}
);
</script>

<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)单独设置为一个函数来调用,这样看起来代表比较易读。


[html]
<script type="text/javascript">
$(

function(event) {
$("#btnShow").hover(OverOut, OverOut);
function OverOut(event) {
$("#DivToggle").toggle(600);
}
}
);
</script>

<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的样式。

显示隐藏的代码可以这样(事实上这段代码是有问题的,但是居然这样写也能实现要的效果):

[html]
<script type="text/javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$("#btnShow").click(OverOut);
}, function() {
$("#btnShow").click(OverOut);
});
}
);
</script>

<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样式的代码这样:


[html]
<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>

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站设计公司 http://www.45qun.com

  • 上一篇:.Net程序员之Python基础教程学习----字典的使用 [Thir
  • 下一篇:最后一页
  •