首页 > 代码库 > JQuery Study Notes— A small demo for unfolding its content

JQuery Study Notes— A small demo for unfolding its content

2024-07-19 09:37:47   210人阅读

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://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>>
4. Source Download








JQuery Study Notes— A small demo for unfolding its content


联系
我们