jquery 点击显示隐藏的三种方法

最新推荐文章于 2024-05-15 12:02:42 发布

weixin_30497527

最新推荐文章于 2024-05-15 12:02:42 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuliwuli/p/5145945.html

版权

jquery点击显示隐藏的三种方法，从复杂到简单。使用jquery需要引用jquery库，如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>。

旁边按钮随着收缩展开发生状态变化，展开+变—，收缩—变+。

收缩效果：

展开效果：

一、HTML结构（盗用网上的）

<body>

<li class="box">
<h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
<p class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</p>
</li>
<br />
<div class="box">
<h1>收缩展开效果<span class="shrinkBox_open "></span></h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
5<br />
</div>
</div>
<br>
</body>

二、css渲染

三、JS文件

1、该方法调用animate动画，完成展开收缩效果。利用addClass与removeClass动态添加样式，进行+与-的切换。

});

2、利用toggleClass动态添加样式，进行+与-的切换

});

3.调用slideToggle()，完成展开收缩效果

$(document).ready(function(){
$(".box h1").click(function(){
$(this).next(".text").slideToggle();
$(this).find(".shrinkBox_open").toggleClass("shrinkBox_close");
});

});
</script>

转载于:https://www.cnblogs.com/wuliwuli/p/5145945.html

weixin_30497527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法，从复杂到简单。使用jquery需要引用jquery库，如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>。旁边按钮随着收缩展开发生状态变化，展开+变—，收缩—变+。收缩效果：展开效果：一、HTML结构（盗用...
复制链接

扫一扫