手风琴效果（vue实现）

最新推荐文章于 2024-04-06 09:10:45 发布
最新推荐文章于 2024-04-06 09:10:45 发布
阅读量9.2k 收藏 12
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengtingyan/article/details/82934542
版权

效果图：
在这里插入图片描述
源码1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        li{
            padding-left: 10px;
            line-height: 2;
        }

        li:hover{
            background-color: #eee;
        }

        .list{
            padding: 0 50px;
        }

        .list .title{
            border: 1px solid #ccc;
            padding: 10px 5px;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            font-size: 18px;
            font-weight: bold;
        }

        .list .item{
            border: 1px solid #ccc;
        }

        .list:not(:nth-of-type(1)) .item{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="list" v-for="(l,i) in lists" :key="i">
            <div class="title" @click="toggle($event)">{{l.title}}</div>
            <ul class="item">
                <li v-for="(item,index) in l.items" :key="index">{{item}}</li>
            </ul>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                lists: [
                    { title:'我的同学', items:["张三", "李四", "王五"] },
                    { title:'我的同事', items:["张三1", "李四1", "王五1"] },
                    { title:'我的家人', items:["张三2", "李四2", "王五2"] }
                ]
                
            },
            methods: {
                toggle: function(ev){
                    var $title = $(ev.target);
                    $title.parents('#app').find('.item').hide();
                    $title.next().show(1000);
                }
            }
        })
    </script>
</body>
</html>

源码2.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        li {
            padding-left: 10px;
            line-height: 2;
        }

        li:hover {
            background-color: #eee;
        }

        .list {
            padding: 0 50px;
        }

        .list .title {
            border: 1px solid #ccc;
            padding: 10px 5px;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            font-size: 18px;
            font-weight: bold;
        }

        .list .item {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="list" v-for="(l,i) in lists" :key="i">
            <div class="title" @click="toggle(i)">{{l.title}}</div>
            <ul class="item" v-show="l.show">
                <li v-for="(item,index) in l.items" :key="index">{{item}}</li>
            </ul>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                lists: [
                    { title: '我的同学', items: ["张三", "李四", "王五"], show: false },
                    { title: '我的同事', items: ["张三1", "李四1", "王五1"], show: true },
                    { title: '我的家人', items: ["张三2", "李四2", "王五2"], show: false }
                ]

            },
            methods: {
                toggle: function (index) {
                    // ES6的新语法，称为箭头函数， 它是语法糖。
                    // 当箭头函数函数体中只有一条语句时，return语句可省略。
                    this.lists.forEach((list, i) => list.show = i == index)
                    // 回调函数， 回调函数有三个形参，list当前循环中对象,i表示当前循环中的索引
                    // arr 表示循环的数组本身
                    // this.lists.forEach(function(list, i, arr){
                    //     // console.log(arr[i]==list);
                    //     // return list.show = i == index;
                    //     if(i == index){
                    //         list.show = true;
                    //     } else {
                    //         list.show = false;
                    //     }
                    // });
                }
            }
        })
    </script>
</body>

</html>

https://www.cnblogs.com/Smiled/p/7610905.html

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素
$(selector).toggle(speed,callback,switch)
效果图：再点击时候只打开点击哪个的列表，其他的 关闭
在这里插入图片描述在这里插入图片描述在这里插入图片描述
安装 npm install --save-dev less-loader less

<template>
    <div>
        <button v-on:click="decrement">-</button>
        <input type="text"  size="1" v-model="num">
        <button @click="increment">+</button>

        <div class="header">
        <ul>
            <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
            <li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData" :key="index">
                <!-- 在这里打印出boll值方便查看 -->
                {{item.name}}{{item.show}}
                <!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
                <ul v-show="item.show"> 
                    <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
                    <li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)" :key="index">{{a}}</li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
export default {
    //props:["num"],//从helloworld组件里面传一个初始值10。父组件到子组件
    data(){
        return{
            num:0,
            headerData: [{
                    name: '客舱服务',
                    list: ["机上升舱", "呼唤铃", "机上餐食", "我的行程", "安全须知"],
                    show: true
                }, {
                    name: '精彩华夏',
                    list: ["品牌介绍", "华夏通程", "航线特惠", "华夏文化"],
                    show: true
                }, {
                    name: '娱乐',
                    list: ["影视", "音乐", "游戏", "阅读"],
                    show: true
                }]
        }  
    },
    methods:{
        increment(){
            this.num++
        },
        decrement(){
            if (this.num<=0){
                alert('受不了啦，宝贝不能再减少啦')
                this.num=0;
            }else {
                this.num--;
            }

        },

        changeli: function(ind, item) {
                // 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
                this.headerData.forEach(i => {
                    // 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
                    if (i.show !== this.headerData[ind].show) {
                        i.show = false;
                    };
                });
                // 取反(true或false)
                item.show = !item.show;
                console.log(item.name)
            },
            doThis: function(index) {
                alert(index)
            }
    }
}
</script>
<style lang="less" scoped>

input{
      text-align: center;
    }

.header {
        width: 20%;
        background-color: rgb(0, 50, 116);
        color: #ffffff;
        >ul {
            width: 100%;
            // @include clearfix;
            >li {
                width: 100%;
                // border: 1px solid #ffffff;
                cursor: pointer; // float: left;
                color: 20px;
                text-align: center;
                line-height: 60px;
                &:hover {
                    background-color: rgb(7, 27, 53);
                }
                >ul {
                    width: 100%;
                    background: rgb(0, 50, 116);
                    li{
                        &:hover{
                            background: rgb(0, 50, 116);
                        }
                    }
                }
            }
            .active {
                background-color: rgb(12, 48, 94);
            }
        }
    }
</style>
宝儿的程序生涯
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现侧边菜单栏手风琴效果实例代码
08-27
本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧
vue手风琴三种方式
03-07
vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴
Vue实现移动端左右滑动效果的方法
10-17
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
vue与原生js，手风琴效果代码
weixin_46450798的博客
05-05 264
【代码】vue与原生js，手风琴效果代码。
手风琴效果（vue实现），【无偿分享】
最新发布
2401_84092694的博客
04-06 320
循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式。判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。效果图：再点击时候只打开点击哪个的列表，其他的 关闭。循环二级菜单数据并使用.stop阻止冒泡。toggle() 方法切换元素的可见状态。在这里打印出boll值方便查看。
vue实现手风琴效果
努力是为了站在万人中央成为别人的光
08-22 6087
在使用vue的过程中，我们难免会碰见各种各样的需求，本篇文章我将实现一个简单的手风琴效果 首先先说一下手风琴实现的流程： 1.设置一个布尔变量来控制二级列表的显示与隐藏 2.同步的通过这个变量来控制展开或者隐藏的图标切换 3.为一级选项创建点击事件，点击一级选项的同时要展开二级列表 接下来，我们就使用代码具体实现 HTML <div class="tree" id="my"> <ul> <li class="item" v-for="list in lists"&
vue怎么实现手风琴效果_小实例: 用vue实现手风琴效果
weixin_35672512的博客
12-23 791
目标: 通过手风琴的小实例，了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。建议阅读时间: 3分钟手风琴，涉及到两个组件， 和 , 要实现的功能无非两点：小知识: 每个Vue实例都会有一个递增的id，可以通过this._uid获取代码实现:1. 定义一个父组件Collpase，实现以下功能挂载cut方法，传入被点击的实例的Id, 遍历子组件，确认是...
【推拉框-手风琴】vue3实现手风琴效果的组件
qq_2511276124的博客
03-03 2839
在工作时有时会用到竖形手风琴效果的组件。 在此记录下实现代码和实现思路。
Vue简易图片手风琴组件，包含宽度适应（JS操作CSS实现）
weixin_44271194的博客
11-25 1537
背景：最近在做一个企业门户网站，有一个需求是做一个图片手风琴，图片和文字都从后端获取，其中鼠标hover之后标题向上移动，于是便开始了本次手风琴组件制作 初始效果 大体思路 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录初始效果前言一、初版二、封装中遇到的问题1.props2.传入的图片数量的不定的 前言 背景：最近在参与一个企业门户网站项目，有一个需求是做一个图片手风琴，图片和文字都从后端获取，其中鼠标hover之后标题向上移动。 主页请求数据后，统一加载组件，我只需
2021-09-10 工作记录-vue实现手风琴效果
weixin_48850734的博客
10-19 967
一、vue实现手风琴效果 结果： 代码： HTML: 对应代码： <section class="star_intro pc"> <div class="container"> <div class="center" :class="{ activeCenter: activeIndex == index + 1 }" v-for="(studentImg, index) in PC_
基于Vue实现拖拽效果
08-27
主要介绍了基于Vue实现拖拽效果,文中给大家介绍了clientY pageY screenY layerY offsetY的区别讲解，需要的朋友可以参考下
Vue.js手风琴菜单组件开发实例
10-19
主要为大家详细介绍了Vue.js手风琴菜单组件开发实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【vue2】vue2 实现手风琴效果，复制粘贴直接使用
amoureux555的博客
11-14 594
【vue2】vue2 实现手风琴效果，复制粘贴直接使用，舒适简介的特效
VUE手风琴
weixin_48927323的博客
05-16 505
手写的手风琴，这是效果图，如下 <div v-for="(item,index) in listData" :key="index"> //一级 title <div @click="oneIndexChange(index, item)"> <img v-if="oneIndex == index"/> <img v-esle/> </div> <d
react学习笔记二--面向组件编程一（组件的概念、使用及三大属性）
weixin_50119334的博客
11-19 256
react元素 React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。 一个元素就像电影的单帧：它代表了某个特定时刻的 UI。 更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render() data-reactroot 表面当前元素是 该组件的顶层标签 react组件 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。 组件名称必须以大写字母开头。 **React 会将以
详细vue实现手风琴效果
lwf0829的博客
11-22 941
利用鼠标移入移出事件实现内容出现隐藏 用到的知识点： 1.@mouseover 鼠标移入事件 2.@mouseout 鼠标移出事件 3.v-if 条件渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"> * {
vue 手风琴+分页
henghahouhei的博客
07-25 72
vue 手风琴+分页。
Element UI 中可展开表格手风琴效果实现（toggleRowExpansion方法的正确使用方式）
热门推荐
钟大灵的博客
12-29 4万+
问题讲解：在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到官方代码中在这边没有让这个可展开tabl
Vue 中文本内容超出规定行数（字数）后展开收起的处理，超出部分...显示
Yanfengting的博客
12-11 1万+
https://www.jianshu.com/p/09154ebf5f447 https://blog.csdn.net/zhuyuchen321/article/details/81941190
vue 移动端 transition 实现手风琴动画
05-17
手风琴动画是指在一组元素中，其中一个元素被展开时，其他元素同时被收缩，形成一个类似于手风琴的效果。在 Vue 移动端开发中，可以使用 transition 动画来实现手风琴效果。 首先，在 HTML 中定义一组需要展开和收缩的元素，可以使用 v-for 指令来动态渲染元素，并绑定一个 active 变量表示当前展开元素的索引： ``` <div class="accordion"> <div v-for="(item, index) in items" :key="index" :class="{ active: index === active }"> <div class="title" @click="toggle(index)"> {{ item.title }} </div> <div class="content"> {{ item.content }} </div> </div> </div> ``` 其中，toggle 方法用于切换展开和收缩状态： ``` methods: { toggle(index) { this.active = index === this.active ? -1 : index; } } ``` 接下来，在 CSS 中定义手风琴动画的样式，使用 transform 属性实现元素的展开和收缩： ``` .accordion { .title { cursor: pointer; } .content { overflow: hidden; transition: height 0.3s ease-out; &.active { height: auto; transition: height 0.3s ease-in; } } } ``` 其中，active 类用于控制元素的展开和收缩状态，当元素被激活时，添加 active 类，并将高度设置为 auto，实现元素的展开效果；当元素被取消激活时，移除 active 类，并将高度设置为 0，实现元素的收缩效果。 最后，在 Vue 中使用 transition 组件包裹元素，实现动画效果： ``` <transition name="accordion"> <div v-for="(item, index) in items" :key="index" :class="{ active: index === active }"> <div class="title" @click="toggle(index)"> {{ item.title }} </div> <div class="content"> {{ item.content }} </div> </div> </transition> ``` 其中，name 属性用于指定动画的名称，可以在 CSS 中定义对应的动画样式。 这样就完成了手风琴动画的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值