文章目录
- 实现隐藏与显示相互切换的效果
- 可以恢复函数 toggle 轮流执行事件监听器的功能
toggle()方法主要有两个功能,一是用于绑定两个或多个事件处理器函数,在元素被点击时轮流执行;二是切换元素的显隐状态,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。在jQuery 1.9中,toggle()方法的第一种使用方式被弃用。删除该机制是为了减少混淆,提高库的模块化。
实现隐藏与显示相互切换的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实现隐藏与显示相互切换的效果</title><style>.xs {display: none;}</style><script src="js/jquery-3.5.1.js"></script><script>$(function () {var flag = 1;$("#a1").click(function (e) {if (flag == 1) {// 显示div$("#d1").removeClass("xs");flag = 0;} else {// 隐藏$("#d1").addClass("xs");flag = 1;}});});</script>
</head>
<body style="font-size: 20px;">
<a id="a1" href="javascript:;">测试</a>
<div id="d1" class="xs">hello</div>
</body>
</html>
或者
var num = 0;$('#a1').click(function (e) {if (num++ % 2 == 0) {// 显示$("#d1").removeClass("xs");} else {// 隐藏$("#d1").addClass("xs");}e.preventDefault(); //阻止元素的默认动作(如果存在) });
或者
var i=true;//表示开关$(".one .top").click(function() {if(i){$(".content").hide("slow");i=false;}else {$(".content").show(1500);i=true;}});
可以恢复函数 toggle 轮流执行事件监听器的功能
引入jQuery迁移插件
<script src="../jquery-migrate-1.4.1.js"></script>
在浏览器中运行,可以正常的轮流执行事件监听函数,不过在控制台出会多出一条警示:
JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated