百分比手风琴效果

weixin_50756332

已于 2023-03-05 12:18:29 修改

阅读量44

点赞数

分类专栏：前端组件封装文章标签： css html 前端 javascript jquery

于 2023-03-05 10:29:38 首次发布

本文链接：https://blog.csdn.net/weixin_50756332/article/details/129342982

版权

前端组件封装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该示例展示了如何利用jQuery的slideToggle()方法创建一个可展开/折叠的手风琴组件。组件包含自定义的CSS样式，用于显示百分比数据，包括Forecast和MotherLock目标，以及正负状态提示。点击顶部摘要会切换显示详细信息。

摘要由CSDN通过智能技术生成

今天给大家分享一个手风琴效果的组件，可以修改样式为自己所用。

这里采用了jQuery的slideToggle()效果，点击可以切换展示和折叠。

欢迎给出意见和建议。

下面是效果图：

下面是代码（仅供参考）：

<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./js/jquery.js"></script>
    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none
        }
        ul {
            box-sizing: border-box;
            padding: 5px;
            width: 400px;
            /* background:pink; */
            background-color: #052143;
            margin: 50px auto;
            color: #CDCAC7;
        }
        ul>li {
            /* border-bottom: 1px solid #ccc; */
            line-height: 50px;
            text-align: center;
        }

        ul .summary {
            border-radius: 15px;
            height: 100px;
            background-color: #12315E;
            margin: 10px 0;
            padding: 10px;
        }

        /* Forecast单行样式 */
        ul .summary .top {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        ul .summary .top h3 {
            display: inline-block;
            width: 43px;
            font-weight: 400;
            font-size: 25px;
            color: #fff;
        }
        ul .summary .top .goal-style {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin: 0 45px;
            font-size: 15px;
        }
        /* ul .summary .top .goal-style span {

        } */
        ul .summary .top .rate {
            color: #CDCAC7;
        }

        .rate-red {
            color: #F90102;
        }
        .rate-green {
            color: #00B54F;
        }

        /* Mother Lock单行样式 */
        ul .summary .bottom {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        ul .summary .bottom h3 {
            display: inline-block;
            width: 30px;
            font-weight: 400;
            font-size: 25px;
            color: #fff;
        }
        ul .summary .bottom .sector-rate{
            width: 58px;
            color: #00B54F;
        }
        ul .summary .bottom .goal-style{
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin: 0 30px;
            font-size: 15px;
        }
        ul>li>ol {
            display: none;
            background-color:#052143;
        }
        ul>li>ol>li {
            padding: 10px;
            border-radius: 5px;
            margin: 5px 15px;
            background-color: #12315E;
            line-height: 35px;
        }

        ul>li>ol>li .top {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        ul>li>ol>li .top h3 {
            display: inline-block;
            width: 30px;
            font-weight: 400;
            font-size: 15px;
            color: #fff;
        }

        ul>li>ol>li .top .goal-style {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin: 0 45px;
            font-size: 13px;
        }

        ul>li>ol>li .top .rate {
            font-size: 13px;
            color: #F90102;
        }

        ul>li>ol>li .bottom {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        ul>li>ol>li .bottom h3 {
            display: inline-block;
            width: 30px;
            font-weight: 400;
            font-size: 20px;
            color: #00B54F;
        }

        ul>li>ol>li .bottom .sector-rate {
            width: 45px;
            font-size: 15px;
        }

        ul>li>ol>li .bottom .goal-style{
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin: 0 30px;
            font-size: 13px;
        }

        ul>li>ol>li .bottom .rate {
            font-size: 13px;
            color: #00B54F;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li>
            <div class="summary">
                <div class="top">
                    <h3>Dep1</h3>
                    <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                    <span class="rate-red"><i></i>0.10%</span>
                </div>
                <div class="bottom">
                    <h3 class="sector-rate">4.8%</h3>
                    <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                    <span class="rate-green"><i></i>0.10%</span>
                </div>
            </div>
            <ol>
                <li class="detail">
                    <div class="top">
                        <h3>Dep11</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
                <li class="detail">
                    <div class="top">
                        <h3>Dep12</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
            </ol>
        </li>
        <li>
            <div class="summary">
                <div class="top">
                    <h3>Dep2</h3>
                    <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                    <span class="rate-red"><i></i>0.10%</span>
                </div>
                <div class="bottom">
                    <h3 class="sector-rate">4.8%</h3>
                    <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                    <span class="rate-green"><i></i>0.10%</span>
                </div>
            </div>
            <ol>
                <li class="detail">
                    <div class="top">
                        <h3>Dep21</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
                <li class="detail">
                    <div class="top">
                        <h3>Dep22</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
            </ol>
        </li>

        <li>
            <div class="summary">
                <div class="top">
                    <h3>Dep3</h3>
                    <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                    <span class="rate-red"><i></i>0.10%</span>
                </div>
                <div class="bottom">
                    <h3 class="sector-rate">4.8%</h3>
                    <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                    <span class="rate-green"><i></i>0.10%</span>
                </div>
            </div>
            <ol>
                <li class="detail">
                    <div class="top">
                        <h3>Dep31</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
                <li class="detail">
                    <div class="top">
                        <h3>Dep32</h3>
                        <span class="goal-style">Forecast Goal: <span>4.05%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                    <div class="bottom">
                        <h3 class="sector-rate">4.8%</h3>
                        <span class="goal-style">Mother Lock Goal: <span>4.25%</span></span>
                        <span class="rate"><i></i>0.10%</span>
                    </div>
                </li>
            </ol>
        </li>
        
    </ul>
    <script type="text/javascript">
        $("#ul>li>div").click(function(){
            $(this).next().slideToggle()
        });
    </script>
</body>
</html>