龙空技术网

jQuery第四十九天练习

轻鸟545 105

前言:

此刻同学们对“jquery数字加1”可能比较看重,朋友们都想要知道一些“jquery数字加1”的相关知识。那么小编同时在网摘上网罗了一些有关“jquery数字加1””的相关资讯,希望姐妹们能喜欢,姐妹们一起来学习一下吧!

Html:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE-edge">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title></title>        <link rel="stylesheet" href="../css/20231022.css">        <script src="../js/jquery-3.7.1.js"></script>    </head>    <body>        <div class="accordion">            <div class="accordion-item">                <div class="item-header">                    <h1 class="title">设计</h1>                    <div class="icon">                        +                    </div>                </div>                <p class="text">                    指“把一种设想通过合理的规划、周密的计划、通过各种方式表达出来的过程”                </p>            </div>            <div class="accordion-item">                <div class="item-header">                    <h1 class="title">网站</h1>                    <div class="icon">                        +                    </div>                </div>                <p class="text">                    网站(Website)是指在因特网上根据一定的规则,使用HTML(标准通用标记语言)等工具制作的用于展示特定内容相关网页的集合                </p>            </div>            <div class="accordion-item">                <div class="item-header">                    <h1 class="title">组件</h1>                    <div class="icon">                        +                    </div>                </div>                <p class="text">                    用于开发构建用户界面(UI)的组件                </p>            </div>            <div class="accordion-item">                <div class="item-header">                    <h1 class="title">数据</h1>                    <div class="icon">                        +                    </div>                </div>                <p class="text">                    数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等                </p>            </div>        </div>                <script type="text/javascript">            $(".item-header").click(function(){                $(".accordion-item").removeClass("active");                $(this).parent().addClass("active");                $(".icon").text("+");                $(this).children(".icon").text("-");            });        </script>    </body></html>

Css:

*{    margin: 0;    padding: 0;    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    box-sizing: border-box;}body{    background-color: aquamarine;    display: flex;    min-height: 100vh;    align-items: center;    justify-content: center;}.accordion{    max-width: 600px;    padding: 20px;}.accordion-item{    border-bottom: 1px solid #ddd;    padding: 20px 0;}.item-header{     padding: 14px 6px;     display: flex;     align-items: center;     justify-content: space-between;     cursor: pointer;}.title{    font-size: 20px;    font-weight: 600;}.icon{    width: 28px;    height: 28px;    border: 2px solid #000;    border-radius: 50%;    text-align: center;    font-size: 30px;    font-weight: 700;    line-height: 25px;}.text{    color: #888;    padding: 0 6px;    max-height: 0;    overflow: hidden;}.accordion-item.active .text{    max-height: 600px;    transition: .4s linear;}

标签: #jquery数字加1 #jquery设置header