点击菜单显示与隐藏 | 帅大叔的博客

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
完整代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单点击隐藏与显示</title>
    <style>
       .container{
           width: 1200px;
           margin: 20px auto;
           min-height: 700px;
           display: flex;
           padding: 0px;
       }

       .left{
            height: 700px;
       }
       .right{
           padding: 0;
           flex: 1;
           background: #ffe;
       }

       .left-container{
           display: flex;
           height: 100%;
           flex-direction: row;
           flex-wrap: nowrap
       }

       .left-container .left-menu{
           background: #262626;
           overflow: hidden;
           transition: width 0.5s;
           height: 100%;
           color: #fff;
           text-align: center;
       }
       .left-container .icon-unfold{
           color: aqua;
       }
    </style>

</head>
<body>
<div id="app">

    <div class="container">

        <div class="left" >

            <div class="left-container">
                <div class="left-menu" :style="{width:leftWidth+ 'px'}">
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                    <p>我的菜单</p>
                </div>
                <div @click="unfoldNav" class="icon-unfold">{{text}}</div>
            </div>
        </div>
        <div class="right">
            <p>正文........................</p>
        </div>

    </div>

</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            leftWidth: 250,
            text:"关闭"
        },
        methods:{

            unfoldNav: function () {
                this.leftWidth = this.leftWidth > 0 ? 0 : 250;
                this.text = this.text === "关闭" ? "展开" : "关闭";
            }
        }
    })

</script>

</body>
</html>
用到flex 布局，加上css3 width 变化的时间动画