jQuery中togger总结（小疑问）

最新推荐文章于 2022-04-27 16:06:39 发布

原创最新推荐文章于 2022-04-27 16:06:39 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #设计模式

java 同时被 2 个专栏收录

36 篇文章

订阅专栏

设计模式

13 篇文章

订阅专栏

本文通过两个示例展示了如何使用jQuery的toggle方法，并探讨了在该方法中使用回调函数的不同方式及其产生的效果。第一个示例中，点击按钮时会先触发弹窗再切换段落的显示状态；而在第二个示例中，顺序则相反，且每次切换都会触发弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	function f(){
		alert('laji');
	}
  $("button").click(function(){
    $("p").toggle('slow',f());//--------------------------------------------------------------------------------------------
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
<p>这是第三个文本段落。</p>
</body>
</html>

以上的写法，在弹出调用toggle的时候，先调用弹出框，只会有一次弹出框，然后再调用toggle。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	function f(){
		alert('laji');
	}
  $("button").click(function(){
    $("p").toggle('slow',f);//---------------------------------------------------------------------------------------------------
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
<p>这是第三个文本段落。</p>
</body>
</html>

这种写法会先调用toggle，然后调用三次弹出框，这里要注意，细节，不知道是不是bug。