JQuery Study Notes— A small demo for unfolding its content

1. Before unfolding:

2. After unfolding:

3. coding:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home</title>
    <style>
        .parent {
            width: 500px;
            color: white;
        }

        .label {
            width: 500px;
            background-color: gray;
            /*padding:15px;*/
        }
        .label-content {
            background-color: gray;
            padding-left:16px;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
        }
        .label-radius {
            border-radius: 10px;
        }
        .label-radius-up{
            border-top-left-radius:10px;
            border-top-right-radius:10px;
        }
        .hiding {
            display: none;
        }

        .icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            display: inline-block;
        }

        .icon-right {
            background-image: url("images/ui-icons_ef8c08_256x240.png");
            background-position-x:-32px;
            background-position-y:0px;
        }
        .icon-down {
            background-image: url("images/ui-icons_ef8c08_256x240.png");
            background-position-x:-64px;
            background-position-y:0px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".label").on("click", function () {

                if ($(this).find(".icon").hasClass("icon-right")) {// current div haven't been fold
                    // resetting the whole div
                    $(".label").removeClass("label-radius-up");
                    $(".label").addClass("label-radius")
                    $(".icon").removeClass("icon-down");
                    $(".icon").addClass("icon-right");
                    $(".label-content").addClass("hiding");

                    $(this).find(".icon").removeClass("icon-right");
                    $(this).find(".icon").addClass("icon-down");
                    $(this).removeClass("label-radius");
                    $(this).addClass("label-radius-up");
                    $(this).next().removeClass("hiding");

                } else {
                    $(this).find(".icon").removeClass("icon-down");
                    $(this).find(".icon").addClass("icon-right");
                    $(this).removeClass("label-radius-up");
                    $(this).addClass("label-radius");
                    $(this).next().addClass("hiding");
                }
            });
        });
    </script>
</head>
<body>
    <div class="parent">
        <div class="label label-radius"><span class="icon icon-right"></span>First</div>
        <div class="label-content hiding">111111111111</div>
        <div class="label label-radius"><span class="icon icon-right"></span>Second</div>
        <div class="label-content hiding">222222222222</div>
        <div class="label label-radius"><span class="icon icon-right"></span>Three</div>
        <div class="label-content hiding">3333333333333</div>
    </div>
</body>
</html>

4. Source Download

时间： 2024-08-07 02:36:49

JQuery Study Notes— A small demo for unfolding its content的相关文章

JQuery Study Notes— A small demo for Smooth Animated Menu

1. Before expanding: 2. coding: <!DOCTYPE html> <html> <head> <title>Smooth Animated Menu</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script&

My study notes —— 初始24种设计模式

摘要设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的:设计模式使代码编制真正工程化:设计模式是软件工程的基石脉络,如同大厦的结构一样. 目录设计概念设计原则四要素基本模式创建型结构型行为型正文设计概念 Change:让代码富有弹性,能够应对需求的变化: DRY:消除冗余,让代码更精炼: KISS:让代码

[2016-03-16]How can I take better study notes?

A:Dad,how can I take better study notes? B:Okay,look.Divide your pate into two columns. A:Like this? B:No.the one on the right should be larger. A:Let me do it agian.Is this better? B:Yes.Write down all the ideas on the right side of the page. A:What

Machine Learning Algorithms Study Notes(3)--Learning Theory

Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 本系列文章是Andrew Ng 在斯坦福的机器学习课程 CS 229 的学习笔记. Machine Learning Algorithms Study Notes 系列文章介绍 3 Learning Theory 3.1 Regularization and model selection 模型选择问题:对于一个学习问题,可以有多种模型选择.比如要拟合一组样本点,

bootstrap+jquery+mustache+springmvc+idworker整合demo代码

原文:bootstrap+jquery+mustache+springmvc+idworker整合demo代码源代码下载地址:http://www.zuidaima.com/share/1550463719148544.htm 简单实现的一个发表评论的代码,麻雀虽小五脏俱全,请有需要的牛人下载,另外最代码决定用mustache来做js的模板. maven的工程,需要转换成dynamic web project,不会的请参考这个:如何在eclipse jee中创建Maven project并且转

Machine Learning Algorithms Study Notes(2)--Supervised Learning

Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 2 Supervised Learning 3 2.1 Perceptron Learning Algorithm (PLA) 3 2.1.1 PLA -- "知错能改"演算法 4 2.2 Linear Regression 6 2.2.1 线性回归模型 6 2.2.2 最小二乘法( le

Machine Learning Algorithms Study Notes(1)--Introduction

Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 目录 1 Introduction 1 1.1 What is Machine Learning 1 1.2 学习心得和笔记的框架 1 2 Supervised Learning 3 2.1 Perceptron Learning Algorithm (PLA) 3 2.1.1 PLA -- "知

jQuery之基础核心（demo)

jQuery之基础核心作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javascript基础,又刚刚接触jQuery的初学者.(如有错误,请指正)咱们从基础语法说起,基础语法是:$(selector).action() 美元符号$定义jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操

jquery几个常用的demo

新建两个页面.一个叫做 ---- demo1.js------- 一个叫做 ----- demo1.html----- 代码分别如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6  7 <link href="