HTML案例：伸缩侧边栏

作者: 图恩分类: 编程开发阅读: 434发布时间： 2022-01-13 06:31:45

这个案例要用到的字体图标素材，可以到网上搜索阿里巴巴矢量图标，在里面可以找到大量的好看的图标素材，如何下载使用可以去网上查看教程

效果图

这个案例很简单，就是通过监听鼠标点击图标时，展开右边的文字内容，js里的expandwidth变量，通过它是true或是false来判断是要收起侧边栏还是展开，当expandwidth为false侧边栏收起，为true时侧边栏展开

expand() {
            this.expandwidth = !this.expandwidth
            let expand = this.$refs.expand
            if (this.expandwidth) {
                expand.style.width = '300px'
                expand.querySelectorAll('li').forEach(element => {
                    element.style.width = '300px'
                });
            }else {
                expand.style.width = '100px'
                expand.querySelectorAll('li').forEach(element => {
                    element.style.width = '100px'
                });
            }
        }

展开

expandwidth变量还起到动态添加样式的作用

            <li v-for='(item,index) in font' @click='expand'>
                <div class="iconfont" :class='[item.css,{expanddiv:expandwidth}]'></div>
                <p>{{item.text}}</p>
            </li>

以下是所有代码：

<!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>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app">
        <ul class="big-box" ref="expand">
            <li v-for='(item,index) in font' @click='expand'>
                <div class="iconfont" :class='[item.css,{expanddiv:expandwidth}]'></div>
                <p>{{item.text}}</p>
            </li>
        </ul>
    </div>
    <script src="../../js/vue.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
}

ul,
li,
p {
    margin: 0;
    padding: 0;
    list-style: none;
}

.big-box {
    width: 100px;
    height: auto;
    margin: 10px auto;
    box-shadow: 0 0 3px #b6b6b6;
    border-radius: 10px;
    overflow: hidden;
    transition: all ease-in-out 0.5s;
}

.big-box li {
    width: 100px;
    height: 70px;
    text-align: center;
    color: #8a2be2;
    cursor: pointer;
    overflow: hidden;
}

.big-box li div {
    float: left;
    width: 100px;
    height: 70px;
    line-height: 70px;
    color: #8a2be2;
    transition: all ease-in-out 0.5s;
}

.big-box li p {
    float: left;
    width: 200px;
    height: 70px;
    font-size: 20px;
    line-height: 70px;
    color: #777;
}

.big-box li .expanddiv {
    background-color: #8a2be2;
    color: white;
}

.big-box li:hover div {
    transform: translateY(-5px);
}

.big-box li:hover p {
    background-color: #8a2be2;
    color: white;
}



new Vue({
    el: '#app',
    data: {
        font: [{
                css: 'icon-shouye',
                text: 'home'
            }, {
                css: 'icon-wenjianjiai',
                text: 'file'
            }, {
                css: 'icon-wode',
                text: 'individual'
            }, {
                css: 'icon-tongzhi',
                text: 'information'
            },
            {
                css: 'icon-fenxiang-copy',
                text: 'share'
            }, {
                css: 'icon-tupiantubiao',
                text: 'picture'
            }, {
                css: 'icon-tubiao-',
                text: 'welfare'
            },
            {
                css: 'icon-tubiao',
                text: 'function'
            }, {
                css: 'icon-shezhi',
                text: 'set-up'
            }
        ],
        expandwidth: false
    },
    methods: {
        expand() {
            this.expandwidth = !this.expandwidth
            let expand = this.$refs.expand
            if (this.expandwidth) {
                expand.style.width = '300px'
                expand.querySelectorAll('li').forEach(element => {
                    element.style.width = '300px'
                });
            }else {
                expand.style.width = '100px'
                expand.querySelectorAll('li').forEach(element => {
                    element.style.width = '100px'
                });
            }
        }
    },
})

本文章由javascript技术分享原创和收集

HTML案例：伸缩侧边栏

发表评论 (审核通过后显示评论)：

文章评论(0)