JQuery中的toggle怎么用？一些使用分析

2016-08-02 分类：网站建设

比如：对一个按钮的点击事件和一个DIV的背景，点击一次按扣子，把DIV的背景显示为蓝色，点击第二起的时候要把DIV的
背景色改为黑色。
我们定义的HTML代码如下：
<body>
<input type=“button”id=“btnShow”value=“Toggle”/>
<div id=“DivToggle”>此处显示id“DivToggle”的内容</div>
</body>
定义的起初的样子式如下：
复制代码代码如下：
#DivToggle {
height: 999px；
width: 999px；
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是鼠标移开的事件函数。

网站名称：JQuery中的toggle怎么用？一些使用分析
转载源于：https://www.cdcxhl.com/news11/41161.html

成都网站建设公司_创新互联，为您提供手机网站建设、网站建设、网站策划、做网站、云服务器、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容