通过vue框架实现手风琴菜单（有什么写的不好的地方，请评论）

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入通过vue框.

qq_34386468

2733人浏览 · 2018-12-15 15:08:13

qq_34386468 · 2018-12-15 15:08:13 发布

通过vue框架实现手风琴菜单

实现效果

html


    <div id="app">
        <ul class="list">
            <li v-for="item,i in dataList">
                <a href="#" v-on:click="dianji(i)" v-bind:style="{background:index==i?'#faaf':'rgb(105, 218, 208)'}"
                    v-text="item.title"></a>
                <ul v-bind:style="{display:index==i?'block':'none'}" v-for="opt in item.list1">
                    <li v-text="opt.content">list1_content1</li>
                </ul>
            </li>
        </ul>

    </div>

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .list {
            width: 400px;
            margin: 100px auto 0;
            text-align: center;
        }

        .list>li {
            width: 400px;
        }

        .list>li a {
            display: block;
            width: 400px;
            height: 40px;
            background: rgb(105, 218, 208);
            line-height: 40px;
            color: #fff;
            text-decoration: none;
        }

        /* .list>li a:hover {
            text-decoration: underline;
            background: #faaf;
            color: aliceblue;
        } */

        .list>li>ul {
            display: none;

        }

        .list>li>ul>li {
            display: block;
            width: 400px;
            line-height: 40px;
            height: 40px;
            background: rgb(93, 201, 90);
        }
    </style>

var vm = new Vue({
            el: '#app',
            data: {
                dataList,
                index: -1
            },
            methods: {
                dianji(i) {
                    if (this.index == i) {
                        this.index = -1;
                    } else {
                        this.index = i;
                    }
                }
            }
        })

数据

 var dataList = [{
            title: 'list1',
            list1: [{
                    content: 'list1_content1'
                },
                {
                    content: 'list1_content2'
                },
                {
                    content: 'list1_content3'
                }
            ]
        }, {
            title: 'list2',
            list1: [{
                    content: 'list2_content1'
                },
                {
                    content: 'list2_content2'
                },
                {
                    content: 'list2_content3'
                }
            ]
        }, {
            title: 'list3',
            list1: [{
                    content: 'list3_content1'
                },
                {
                    content: 'list3_content2'
                },
                {
                    content: 'list3_content3'
                }
            ]
        }, {
            title: 'list4',
            list1: [{
                    content: 'list4_content1'
                },
                {
                    content: 'list4_content2'
                },
                {
                    content: 'list4_content3'
                }
            ]
        }, ]

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^