本文介绍了Android 使用jQuery实现item点击显示或隐藏的特效的示例,分享给大家,具体如下:

效果图

a9ed27cccedf6bede069603ec00e74fd.gif

分析

上图中的功能在很多APP上都可能用到过,例如app的帮助界面,告诉用户如何使用APP

一般的实现方式都是通过ListView来实现的,实际上此类需求非常简单,完全可以用WebView加载HTML来实现

抽屉样式的显示隐藏特效可以使用jQuery来实现,一个函数就可以搞定

实现

集成jQuery

网页中需要使用到jQuery,最新版本可以去官网下载

不推荐使用超链接关联的方式把jQuery集成到网页中,如帮助页面就需要考虑在不联网的情况下被访问,所以建议把jQuery放入工程中

这里使用的是发布的精简版本,直接对链接右键另存为文本

a4266ab3361f51075433d97919eed1e0.png

将另存为的文本重命名为jquery.js,在HTML中通过以下代码将jQuery集成进来

记得要根据集成的路径修改对应的引入路径

编写网页

实现一个简单的单条item显示/隐藏特效

body, html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

font-size: 16px;

}

div.div300 {

margin:0px;

padding:5px;

background:#ffffff;

border:solid 1px #c3c3c3;

}

h3.h300 {

margin:0px;

padding:5px;

background:#F5F5F5;

border:solid 1px #c3c3c3;

color:black;

}

$(document).ready(function(){

$(".h300").click(function(){

$(".div300").slideToggle("fast");

});

});

标题

item点击显示或隐藏0

1.上图中的功能在很多APP上都可能用到过,例如app的帮助界面,告诉用户如何使用APP。

2.一般的实现方式都是通过ListView来实现的,实际上此类需求非常的简单,完全可以用HTML来实现。

3.显示隐藏的特效可以使用jQuery来实现,一个函数就可以搞定。

4.网页中需要使用到jQuery,最新版本可以去官网下载。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐