不同版本下的toggle

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

Edward_Si_Cong

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

阅读量511

点赞数

文章标签： jquery 锋利的Jquery

本文链接：https://blog.csdn.net/Edward_Si_Cong/article/details/50791919

版权

本文探讨了使用jQuery的toggle方法时出现的闪烁问题，并通过对比不同版本的jQuery找到解决方案。适用于1.7.1版本的问题在2.4.1版本中得以解决，同时提供了兼容2.1.4版本的代码实现。

摘要由CSDN通过智能技术生成

今天在学习《锋利的JQuery》时遇到了一个问题，在4.1.3合成事件中，使用toggle，出现了一闪而过的现象。

工程源码：

<script>
	$(document).ready(function() {
		$("#head").toggle(function() {
			$(this).next('span').show();
		},
		function() {
			$(this).next('span').hide();
		}
	);
});					
</script>
</head>
<body>
	<div id="head">
		<h1>jqurey</h1>
		<span>hello, world</span>
	</div>
</body>

和书中源码对比，发现除Jquery不同外，其余都相同，判断为Jquery版本造成的。书中源码版本为1.7.1，工程中使用的为2.4.1，切换版本，能正常工作。

效果：,点击后，再次点击，。

若要在2.1.4下工作，则使用：

$(function(){
	$("#head h1").click(function() {
		$(this).next('span').toggle();
	});
});

另附添加高亮代码：

css:

.hightlight {
	background: #ff3300;
}

js:

$(function() {
   $("#head h1").click(function(){
     if($(this).hasClass("hightlight")){
        $(this).removeClass("hightlight");
     }else{
         $(this).addClass("hightlight");
     }
     $(this).next().toggle();
   });
});

或者

$(function(){
	$("#head h1").click(function() {
 		$(this).toggleClass('hightlight');
		$(this).next('span').toggle();
	});
});

Edward_Si_Cong

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫