您的位置：首页 > Web前端 > JQuery

jQuery 1.9中移除了 toggle() 方法

2017-02-22 18:51 253 查看


在 jQuery 的升级向导中，我们可以看到：在 jQuery 1.9 的版本中移除了 toggle() 方法。

带来了什么影响呢，我们分别在 jQuery 1.8 和 jQuery 1.9 的版本下来测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle-jquery1.8</title>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery.min.js"></script>
<style>
div.container {
height: 600px;
border: 1px solid #ccc;
}
div.left {
width: 200px;
height: 500px;
background-color: #36f;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
</div>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
$('#toggle').toggle(function(){
$('.left').slideUp();
},function(){
$('.left').slideDown();
});
});
</script>
</body>
</html>


上面的 demo 使用的是 jQuery 1.8.0 的版本，效果如下图所示：



接下来，同样的代码，我们换成 jQuery 1.9.0 的版本来看看效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle-jquery1.9</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<style>
div.container {
height: 600px;
border: 1px solid #ccc;
}
div.left {
width: 200px;
height: 500px;
background-color: #36f;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
</div>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
$('#toggle').toggle(function(){
$('.left').slideUp();
},function(){
$('.left').slideDown();
});
});
</script>
</body>
</html>


我们发现，由于 toggle() 方法作用在按钮上，按钮消失了。

那么，在 jQuery 1.9 下如何实现呢？

我们可以使用 click() 方法。

然后在 click() 方法里面来进行判断，然后进行相应的操作。

$('#toggle').click(function(){
$('.left').slideToggle();
});


或者

$('#toggle').click(function(){
$('.left').toggle();
});


推荐阅读： jQuery实现左右滑动的toggle

写在最后：约定优于配置——-软件开发的简约原则.

——————————–(完)————————————–



我的

个人网站：https://neveryu.github.io/guestbook/

Github: https://github.com/Neveryu

新浪微博：http://weibo.com/Neveryu





更多学习资源请关注我的新浪微博….
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航