在 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
---------------------------(正文完)------------------------------------
一个前端的学习交流群,想进来面基的,可以点击这个logo ➹,或者手动search群号:685486827,或者 qq 扫一扫
-------------------------------- (完)--------------------------------------
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…