jquery实现隐藏,简化和更多
HTML代码:
<div class="box">
<div class="header">
<h3>图书分类</h3>
<span><img src="data:images/11_03.gif" height="20" width="20" alt="" /></span>
</div>
<div class="content">
<ul>
<li><a href="#">小说(1110)</a></li>
<li><a href="#">文艺(230)</a></li>
<li><a href="#">青春(1430)</a></li>
<li><a href="#">少儿(1560)</a></li>
<li><a href="#">生活(870)</a></li>
<li><a href="#">社科(1460)</a></li>
<li><a href="#">管理(1450)</a></li>
<li><a href="#">计算机(1780)</a></li>
<li><a href="#">教育(930)</a></li>
<li><a href="#">工具书(3450)</a></li>
<li><a href="#">引进版(980)</a></li>
<li><a href="#">其它类(3230)</a></li>
</ul>
<div class="bot">
<a href="#">简化</a>
</div>
</div>
</div>
jQuery代码:
$(".header").click(function() {
if($(".content").is(":visible")){
$(".header span img").attr("src","images/11_05.gif");
$(".content").css("display","none");
}else
{
$(".header span img").attr("src","images/11_03.gif");
$(".content").css("display","block");
}
})
$(".content .bot > a").click(function() {
if($(".content .bot > a").text()=="简化")
{
$("li :gt(4) :not(:last)").hide();
$(".bot>a").text("更多");
}else{
$("li :gt(4) :not(:last)").show();
$(".bot>a").text("简化");
}
})
jquery实现隐藏,简化和更多的更多相关文章
- Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章 小结与快速复习
在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...
- jQuery获取隐藏文本域
[html] view plaincopyprint?//jquery获取隐藏域 <style type="text/css"> div{ width:1 ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- jQuery上拉加载更多
<header id="header">首 页</header> <section id="main"> <ul id ...
- JQuery效果隐藏/显示
hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...
- JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
- jquery中隐藏div的几种方法
//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block, $("#id").hide()://表示disp ...
- jQuery 效果 - 隐藏和显示
$('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...
- jquery显示隐藏toggle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Hybrid App是如何实现网页语言与程序语言的混合?谁占主体?
[编者按]本文作者@徐珂铭,一位看好Html5的移动互联网的从业人士.喜爱玩技术,会点JAVA.HTML及CSS,有自己的想法及姑且能表达想法的文字,因此有了自己的文章. 基于HTML5的Web Ap ...
- 重温WCF之会话Session(九)
转载地址:http://blog.csdn.net/tcjiaan/article/details/8281782 每个客户端在服务器上都有其的独立数据存储区,互不相干,就好像A和服务器在单独谈话一样 ...
- Pyqt QListWidget 展示系统环境变量
今天学习了下Pyqt的 QListWidget 控件 我们先看下这个图片 这张图片就是典型的listWidget效果,我们今天就仿这样布局新建个ListWidget 在网上找了个关于QListWidg ...
- HTML CSS微信CSS显示一些总结
微信显示网页是调用腾讯自带的浏览器内核,由于腾讯浏览器内核对css展示效果没有谷歌浏览器好,导致用谷歌浏览器写好的网页,放到微信页面之后,显示的效果就发生变化,所以调整css样式显得那么吃力: 1. ...
- 2016"百度之星" - 初赛(Astar Round2A)Gym Class(拓扑排序)
Gym Class Accepts: 849 Submissions: 4247 Time Limit: 6000/1000 MS (Java/Others) Memory Limit: 65 ...
- Spring之ResourceLoader加载资源
Resource与ResourceLoader对比 1.Resource接口定义了应用访问底层资源的能力. 通过FileSystemResource以文件系统绝对路径的方式进行访问: 通过ClassP ...
- 智能车学习(二十三)——浅谈心得体会
因为毕竟是竞赛,跟学校挂钩,没办法开源代码和算法完成思路,所以不能详细写太多,如果可以等价交换的话,应该还是可以向领导申请一下的. 在厦大信科通信系,参加这个比赛,大家都觉得性 ...
- H5危险的文件上传对话框
文件对话框 文件上传对话框是一直以来就存在的网页控件. 到了 HTML5 时代,增加了更多的功能,例如支持文件多选.Chrome 甚至还支持「上传文件夹」这一私有特征: <input type= ...
- cf 106C
题目链接:http://vjudge.net/contest/139376#problem/E 题意看注释就能懂了,求能获得的最大价值. 代码: #include<iostream> #i ...
- 数据库查询Database中的表
public class UserDA { SqlConnection conn; SqlCommand cmd; public UserDA(Use uuu) { conn =new SqlConn ...