jQuery下的显示和隐藏
因为太久没更新了,所以来放一点没意思的内容。
做的是jQuery框架的隐藏和显示,HTML如下:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="hide">5</li>
<li class="hide">6</li>
<li class="hide">7</li>
<li>8</li>
<a href="#" onclick="fun()">more</a>
</ul>
Javascript:
var vis=false;
$(".hide").hide();
function fun(){
if(vis==false)
{
$(".hide").show();
$("a").html("less");
vis=!vis;
}
else
{
$(".hide").hide();
$("a").html("more");
vis=!vis;
}
}
首先设定一个布尔量vis表示目前是否已经显示,然后在函数里写一个分支,调用show(), hide()两个函数进行操作,另外还要把链接的html更改一下,vis取反。
后来翻了一下资料,有一个叫toggle()的函数,是用来切换show和hide的,这样直接用一个函数就能完成操作了。
而toggle()的实质是更改style的display属性,所以直接利用display来判断的话,可以将vis变量也节省掉。
更新的JS代码如下:
$(".hide").hide();
function fun(){
if($(".hide").css("display")=="none")
{
$(".hide").show();
$("a").html("less");
}
else
{
$(".hide").hide();
$("a").html("more");
}
}
jQuery下的显示和隐藏的更多相关文章
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- jQuery效果之显示与隐藏
.hide([duration][,complete])--目标元素的隐藏. .show([duration][,complete])--目标元素的显示: .toggle([duration][,co ...
- jquery里面控制显示和隐藏 ___土狗toggle
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...
- jquery渐渐的显示、隐藏效果
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...
- jquery 判断元素显示或隐藏
$().is(":hidden"); $().is(":visible");
- jquery点击显示或隐藏
点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){ $("dd > a").click(fun ...
- 教你三种jQuery框架实现元素显示及隐藏动画方式
摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
随机推荐
- angularjs使用directive实现分页组件
闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 html: <ul class="page clearfix"&g ...
- oracle PL/SQL程序设计
declare 说明部分 (变量说明,光标申明,例外说明 ] begin 语句序列 (DML语句]… exception 例外处理语句 End; /
- 修改MYSQL最大连接数的2种方法
mysql默认最大连接数是100,增加加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini(windows) 或 my.cnf(linux环境)查找 ...
- mysql服务启动
1.C:\Program Files (x86)\MySQL\mysql-5.5.33-win32\bin>net stop mysqlMySQL 服务正在停止.MySQL 服务已成功停止. 2 ...
- 转 常用JQuery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- cxf所用的lib
cxf_lib
- C# 实现将PDF转文本的功能
这篇文章最初只描述使用 PDFBox 来解析PDF文件.现在它已经被扩展到包括使用 IFilter 和 iTextSharp 的例程了. 这篇文章和对应的Visual Studio项目已经更新到目前 ...
- mvc4 整合nhibernate3.0配置
鉴于大家都在解决问题或是学习新东西的时候,并不关注是谁又是谁帮你解决了问题,所有这里为自己做下宣传,我为自己代言. 首先介绍下我的开发环境是vs2010旗舰版,nhibernate采用的是3.0版本. ...
- iOS 数据库操作(使用FMDB)
iOS 数据库操作(使用FMDB) iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.Plausibl ...
- Windows下安装Emacs+Sbcl+Slime
前言 其实网上已经有很多类似的文章了,我也是按照上面的来做.在做的过程中会遇到几个很坑的地方,我自己也是折腾了好久才弄好.所以现在写出来希望能对大家有所帮助. 正文 下载和安装Emacs http:/ ...