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. 数据结构和算法 – 12.高级查找算法(下)

    哈希(散列)技术既是一种存储方法,也是一种查找方法.然而它与线性表.树.图等结构不同的是,前面几种结构,数据元素之间都存在某种逻辑关系,可以用连线图示表示出来,而哈希技术的记录之间不存在什么逻辑关系, ...

  2. JDBC 精度

    http://www.cnblogs.com/tobecrazy/p/3390021.html http://www.cnblogs.com/kerrycode/p/4034231.html http ...

  3. 无废话ExtJs 入门教程十四[文本编辑器:Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  4. 【openGL】关于画点

    #include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...

  5. PHP类方法重写原则

    可能我们日常工作中很少用到这块知识点,但我还是喜欢把遇到的却不清楚的知识点摸清 PHP的类方法重写规则 1.final修饰的类方法不可被子类重写 final修饰的类方法不可被子类重写 即便final ...

  6. .NET Framework 4 与 .NET Framework 4 Client Profile

    今天碰到的一个问题和Client Profile相关的.问题是这样的:一个WPF工程,需要引用另外几个.NET的assembly, 在WPF工程中添加了对这几个assembly的引用,并在程序中可以添 ...

  7. <转>JDBC获取DB元数据

    原文链接:http://jiauwu.iteye.com/blog/1307617 package com.util.jdbc; import java.sql.Connection; import ...

  8. 通过SharePoint Designer对SharePoint 2010的Master Page进行自定制

    1:需要在对应的SiteCollection 和 Site 中开启Publishing的服务 2:在Designer中创建自己的Master Page,进行对原始v4.master代码进行复制,和修改 ...

  9. Codeforces Round #174 (Div. 1) B. Cow Program(dp + 记忆化)

    题目链接:http://codeforces.com/contest/283/problem/B 思路: dp[now][flag]表示现在在位置now,flag表示是接下来要做的步骤,然后根据题意记 ...

  10. MIT 6.828 JOS学习笔记1. Lab 1 Part 1: PC Bootstrap

    Lab 1: Booting a PC Part 1: PC Bootstrap 介绍这一部分知识的目的就是让你能够更加熟悉x86汇编语言,以及PC启动的整个过程,而且也会首次学习使用QEMU软件来仿 ...