jQuery toggle和slideToggle

最新推荐文章于 2024-05-05 07:41:03 发布

maggiehexu

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量9.7k

点赞数

分类专栏： jQuery 文章标签： jquery div xhtml html api 测试

本文链接：https://blog.csdn.net/maggiehexu/article/details/6931122

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~
区别是：

toggle：动态效果为从右至左。横向动作。

slideToggle：动态效果从下至上。竖向动作。

so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的API就可以了~

http://api.jquery.com/toggle/

http://api.jquery.com/slideDown/

一个slideToggle的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dth">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<head>
	<title>测试</title>
<script type="text/javascript">
<!--
function show(id){
$('#'+id).slideToggle("slow");
}
//-->
</script>
</head>
<body>
<div >
   <ul>
       <h2 οnclick="show('1')">栏目1</h2>
       <div id="1">
       <h3 οnclick="show('11')">    栏目11</h3>
       <div id="11">
          <li>        栏目111</li>
          <li οnclick="show('112')">        栏目112</li>
          <div id="112">         <p>            栏目1121</p>
          <p>            栏目1122</p>
          <p>            栏目1123</p>
          <p>            栏目1124</p>
          </div>
          <li>        栏目113</li>
          </div>
          </div>
       <h2 οnclick="show('2')">栏目2</h2>
       <div id="2">
       <h3>    栏目21</h3>
       <h3 οnclick="show('22')">    栏目22</h3>
       <div id="22">
       <li>        栏目221</li>
       </div>
       </div>
       <h2 οnclick="show('3')">栏目3</h2>
       <div id="3">
       <h3>    栏目31</h3>
       <h3>    栏目32</h3>
       </div>
   </ul>
</div>
</body>
</html>

maggiehexu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery toggle和slideToggle

jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~区别是：toggle：动态效果为从右至左。横向动作。slideToggle：动态效果从下至上。竖向动作。so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的A
复制链接

扫一扫