jQuery 1.9中移除了 toggle() 方法

最新推荐文章于 2022-05-02 16:34:22 发布

Never Yu

最新推荐文章于 2022-05-02 16:34:22 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： jquery toggle

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/56494636

版权

前端专栏收录该内容

181 篇文章 16 订阅

订阅专栏

在 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 的版本，效果如下图所示：
toggle-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

更多学习资源请关注我的新浪微博…

Never Yu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录