jQuery手风琴效果

原地址:http://www.jq22.com/jquery-info9370


<html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <title>手风琴效果title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">script>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            .box {
                margin: 50px auto;
                width: 300px;
                height: auto;
                border: solid 1px #cccccc;
            }

            .Collapsing {
                width: 100%;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                border-bottom: 1px solid white;
                text-align: center;
                background-repeat: no-repeat;
                background-position: center right no-repeat;
                background-image: url(images/pro_left.png);
                background-color: #BDBDBD;
                color: #fff;
            }

            .coll_body {
                display: none;
            }

            .coll_body a {
                display: block;
                margin: 10px;
                text-align: center;
                background: #ebebeb;
            }

            .current {
                background-image: url(images/pro_down.png);
            }
        style>

    head>

    <body>
        <div class="box">
            <h3 class="Collapsing  current">星期一h3>
            <div class="coll_body">
                <a href="#">语文a>
                <a href="#">数学a>
                <a href="#">英语a>
                <a href="#">科学a>
            div>
            <h3 class="Collapsing">星期二h3>
            <div class="coll_body">
                <a href="#">语文a>
                <a href="#">数学a>
                <a href="#">英语a>
                <a href="#">科学a>
            div>
            <h3 class="Collapsing">星期三h3>
            <div class="coll_body">
                <a href="#">语文a>
                <a href="#">数学a>
                <a href="#">英语a>
                <a href="#">科学a>
            div>
            <h3 class="Collapsing">星期四h3>
            <div class="coll_body">
                <a href="#">语文a>
                <a href="#">数学a>
                <a href="#">英语a>
                <a href="#">科学a>
            div>
            <h3 class="Collapsing">星期五h3>
            <div class="coll_body">
                <a href="#">语文a>
                <a href="#">数学a>
                <a href="#">英语a>
                <a href="#">科学a>
            div>
        div>
        <script type="text/javascript">
            $(function() {
                $(".coll_body").eq(0).show();
                $(".Collapsing").click(function() {
                    $(this).toggleClass("current").siblings('.Collapsing').removeClass("current"); //切换图标
                    $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
                });
            });
        script>
    body>

html>

你可能感兴趣的:(web前端学习)