手风琴实例

2019-03-11 本文已影响9人 CondorHero
accordion
手风琴实现思路：
使用 ul 写结构，h3 显现，把要显现的内容 content 隐藏
通过点击效果，使用 slideDown SlideUp 动画实现
使用 slideToggle 实现两次点击显示隐藏

手风琴.gif
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .accordion{
            width: 500px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .accordion ul{
            list-style: none;
        }
        .accordion ul li.cur h3{
            background-color: orange;
            
        }
        .accordion ul li h3{
            line-height: 40px;
            background-color: skyblue;
            padding: 0 10px;
            border-bottom: 1px solid #000;
            color:white;
            cursor: pointer;
            position: relative;
        }
        .accordion ul li .content{
            padding: 10px;
            line-height: 150%;
            font-size: 16px;
            display: none;
        }
        .accordion ul li.first .content{
            display: block;
        }
        .accordion ul li i{
            position: absolute;
            right: 10px;
            top: 10px;
            width: 16px;
            height: 16px;
            background-color: yellow;
            background: url(images/icon.png);
            /*css3的过渡*/
            transition:all 1s ease 0s;
        }
        .accordion ul li.cur i{
            /*有cur的时候转90度*/
            transform:rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="accordion">
        <ul>
            <li class="cur first">
                <h3>授课时长和授课模式是怎么样的？<i></i></h3>
                <div class="content">
                    <p>
                        一共88个教学日，上2天休息1天，每个月能上22天课，所以总时长一共4个月（预计毕业时间是7月22日）。教学时间为上午9:00~12:00 ，下午14:30~17:30， 晚自习时间为18:30~20:30。
                    </p>
                </div>
            </li>
            <li>
                <h3>是否有远程班？周末班？<i></i></h3>
                <div class="content">
                    <p>
                        爱前端目前只有脱产实体班，仅在北京校区开设，课程时间4个月（包括休息日）。目前爱前端没有远程班、周末班。欢迎你留意我们的官方网站。
                    </p>
                </div>
            </li>
            <li>
                <h3>是否有班主任和学习辅导员？<i></i></h3>
                <div class="content">
                    <p>
                        实事求是的说，爱前端刚刚成立，所以我们人手不够，任课老师就同时兼任班主任和辅导员了。我们的任课老师同时也将负责学生考勤，监督学生不要迟到早退，维护课堂纪律，上课睡觉、课间打游戏、大声喧哗都是不可能的。
                    </p>
                </div>
            </li>
            <li>
                <h3>课程难么？<i></i></h3>
                <div class="content">
                    <p>
                        我们的课程有一定难度，但只要认真学习，完整学习下来是没有问题的。每位老师上课会细致入微，形象生动，可以辅导每位同学。所以不用担心自己的理解能力跟不上。
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        //监听h3

        $(".accordion ul li h3").click(function(){
            //所有的content合上
            $(".content").slideUp();
            //自己的兄弟content显示
            
            if($(this).siblings(".content").is(":visible")){
                //如果自己的内容兄弟可见，
                //自己的内容兄弟合上，变为不可见。自己的爸爸去掉cur
                $(this).siblings(".content").stop(true).slideUp();
                $(this).parent().removeClass("cur");
            }else{
                //反之，如果自己的内容兄弟不可见
                $(".cur").removeClass("cur");
                //自己的爸爸加上cur
                $(this).parent().addClass("cur");
                //自己的内容兄弟下滑，变为可见
                $(this).siblings(".content").stop(true).slideDown();
            }
        })
    </script>
</body>
</html>
手风琴实例

猜你喜欢

热点阅读
