jQuery中的
toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。强大啊~
区别是:
toggle:动态效果为从右至左。横向动作。
slideToggle:动态效果从下至上。竖向动作。
so,比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。
此外,toggle和slideToggle 还有一些参数可以设置,具体看jQuery的API就可以了~
toggle的用法:
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT> <SCRIPT LANGUAGE=" JavaScript "> $(function(){ $("#z").toggle( function(){ alert(1); }, function(){ alert(2); }, function(){ alert(3); } ); $("#x").click(function(){ $("#z").toggle( function(){ alert(1); }, function(){ alert(2); }, function(){ alert(3); } ); }); }) </SCRIPT> <p style=" width :100px; height :100px; background-color :red;" id="z"></p> <p style="width:100px; height:100px; background-color:blue;" id="x"></p>
slideToggle的用法:
<title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .imgclass { width: 300px; height: 300px; border: solid 1px red; } </style> <script type="text/javascript"> $(function () { $('#Button1').bind('click', function () { $('img').slideUp(2000); }); $('#Button2').bind('click', function () { $('img').slideDown(2000); }); $('#Button3').bind('click', function () { $('img').slideToggle(2000); }) }) </script> </head> <body> <p> <p> <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button" value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></p> <p> <img alt="" src="images/1.jpg" class="imgclass" /></p> </p> </body>
Atas ialah kandungan terperinci 浅析jquery中的toggle与slideToggle的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!