js实现点击后滑动展开或收缩效果

新建一个html文件，定名为test.html，用于实现点击后滑动缩短或睁开结果。

注：需要加载jquery.min.js库文件。

在test.html页面，建立一个div模块，div内利用p标签界说了两段文字，代码如下：

在test.html页面，再利用p标签建立一个class为flip的“请点击这里”段落，用于下面实现点击这里时，睁开或缩短上一步建立的div模块。

利用css对上面建立的html元素进行样式结构，美化其展示的结果，需要出格注重的是类名为panel的div，需要设置其为埋没结果。代码如下：

在页面加载时，利用$(".flip")获得点击的对象，当其被点击时，执行响应的函数实现睁开或缩短的结果。

当“请点击这里”被点击时，利用slideToggle()方式对div对象进行睁开或缩短状况的切换，并在slideToggle()方式里设置slow结果，实现迟缓滑动切换状况的结果。

在浏览器运行test.html，点击“请点击这里”，查看实现的睁开或缩短的结果。

0 条评论