zoukankan      html  css  js  c++  java
  • accordion

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>accordion</title>
        <script src="js/jquery-1.7.1.js"></script>
        <script src="js/sqLib.js"></script>
        <style>
            .accordion-panel{
                 400px;
    
            }
            .accordion-panel-heading{
                color: #d74147;
                 400px;
                height: 40px;
                line-height: 40px;
                border: 1px solid #d74147;
                margin: 5px 0;
                padding-left: 10px;
                border-radius: 5px;
            }
            .accordion-panel-content{
                display: none;
                border: 1px solid #000;
                 400px;
                border-radius: 5px;
                padding-left: 10px;
                line-height: 40px;
            }
        </style>
        <script>
            $(function(){
                $('.accordion-panel-heading').on('click',function(){
                    if($(this).hasClass('active')) {
                        $(this).removeClass('active');
                        $(this).siblings('.accordion-panel-content').slideUp('slow');
                    }
                    else {
                        $('.accordion .accordion-panel-heading').removeClass('active');
                        $('.accordion .accordion-panel-content').slideUp('slow');
                        $(this).addClass('active');
                        $(this).siblings('.accordion-panel-content').slideDown('slow');
                    }
                });
    
            });
        </script>
    </head>
    <body>
    <div class="accordion">
        <div class="accordion-panel">
            <div class="accordion-panel-heading">标题1</div>
            <div class="accordion-panel-content">内容1</div>
        </div>
        <div class="accordion-panel">
            <div class="accordion-panel-heading">标题2</div>
            <div class="accordion-panel-content">内容2</div>
        </div>
        <div class="accordion-panel">
            <div class="accordion-panel-heading">标题3</div>
            <div class="accordion-panel-content">内容3</div>
        </div>
        <div class="accordion-panel">
            <div class="accordion-panel-heading">标题4</div>
            <div class="accordion-panel-content">内容4</div>
        </div>
    
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    idea控制台乱码问题解决
    部署springboot项目到云服务器的两种方式(jar+war)
    case...when...then....(else...)....end的使用小案例
    多线程学习(二)
    多线程学习(一)
    Swagger学习笔记
    Docker进阶篇
    Docker入门基础篇
    Markdown语法学习(推荐使用Typora编辑器)
    git(六)——IDEA中使用git
  • 原文地址:https://www.cnblogs.com/shenq/p/4924693.html
Copyright © 2011-2022 走看看