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实现隐藏,简化和更多的更多相关文章

  1. Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章 小结与快速复习

    在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...

  2. jQuery获取隐藏文本域

    [html] view plaincopyprint?//jquery获取隐藏域  <style type="text/css">  div{      width:1 ...

  3. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  4. jQuery上拉加载更多

    <header id="header">首 页</header> <section id="main"> <ul id ...

  5. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  6. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  7. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

  8. jQuery 效果 - 隐藏和显示

    $('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...

  9. jquery显示隐藏toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Hybrid App是如何实现网页语言与程序语言的混合?谁占主体?

    [编者按]本文作者@徐珂铭,一位看好Html5的移动互联网的从业人士.喜爱玩技术,会点JAVA.HTML及CSS,有自己的想法及姑且能表达想法的文字,因此有了自己的文章. 基于HTML5的Web Ap ...

  2. 重温WCF之会话Session(九)

    转载地址:http://blog.csdn.net/tcjiaan/article/details/8281782 每个客户端在服务器上都有其的独立数据存储区,互不相干,就好像A和服务器在单独谈话一样 ...

  3. Pyqt QListWidget 展示系统环境变量

    今天学习了下Pyqt的 QListWidget 控件 我们先看下这个图片 这张图片就是典型的listWidget效果,我们今天就仿这样布局新建个ListWidget 在网上找了个关于QListWidg ...

  4. HTML CSS微信CSS显示一些总结

    微信显示网页是调用腾讯自带的浏览器内核,由于腾讯浏览器内核对css展示效果没有谷歌浏览器好,导致用谷歌浏览器写好的网页,放到微信页面之后,显示的效果就发生变化,所以调整css样式显得那么吃力: 1. ...

  5. 2016"百度之星" - 初赛(Astar Round2A)Gym Class(拓扑排序)

    Gym Class  Accepts: 849  Submissions: 4247  Time Limit: 6000/1000 MS (Java/Others)  Memory Limit: 65 ...

  6. Spring之ResourceLoader加载资源

    Resource与ResourceLoader对比 1.Resource接口定义了应用访问底层资源的能力. 通过FileSystemResource以文件系统绝对路径的方式进行访问: 通过ClassP ...

  7. 智能车学习(二十三)——浅谈心得体会

          因为毕竟是竞赛,跟学校挂钩,没办法开源代码和算法完成思路,所以不能详细写太多,如果可以等价交换的话,应该还是可以向领导申请一下的.       在厦大信科通信系,参加这个比赛,大家都觉得性 ...

  8. H5危险的文件上传对话框

    文件对话框 文件上传对话框是一直以来就存在的网页控件. 到了 HTML5 时代,增加了更多的功能,例如支持文件多选.Chrome 甚至还支持「上传文件夹」这一私有特征: <input type= ...

  9. cf 106C

    题目链接:http://vjudge.net/contest/139376#problem/E 题意看注释就能懂了,求能获得的最大价值. 代码: #include<iostream> #i ...

  10. 数据库查询Database中的表

    public class UserDA { SqlConnection conn; SqlCommand cmd; public UserDA(Use uuu) { conn =new SqlConn ...