手风琴效果（vue实现）

最新推荐文章于 2024-07-12 15:27:57 发布
最新推荐文章于 2024-07-12 15:27:57 发布
阅读量9.3k 收藏 12
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengtingYan/article/details/82934542
版权
本文介绍了如何使用Vue来实现手风琴效果，通过示例代码展示了toggle方法在切换元素可见状态中的应用。点击时，仅展开点击的手风琴项，其他项将关闭。
摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
源码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
最低0.47元/天 解锁文章
宝儿的程序生涯
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现手风琴效果
努力是为了站在万人中央成为别人的光
08-22 6193
在使用vue的过程中，我们难免会碰见各种各样的需求，本篇文章我将实现一个简单的手风琴效果 首先先说一下手风琴实现的流程： 1.设置一个布尔变量来控制二级列表的显示与隐藏 2.同步的通过这个变量来控制展开或者隐藏的图标切换 3.为一级选项创建点击事件，点击一级选项的同时要展开二级列表 接下来，我们就使用代码具体实现 HTML <div class="tree" id="my"> <ul> <li class="item" v-for="list in lists"&
手风琴效果（vue实现），【无偿分享】
2401_84092694的博客
04-06 516
循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式。判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。效果图：再点击时候只打开点击哪个的列表，其他的 关闭。循环二级菜单数据并使用.stop阻止冒泡。toggle() 方法切换元素的可见状态。在这里打印出boll值方便查看。
el-table expand 实现手风琴效果
最新发布
leyu_miss的博客
07-12 284
在项目开发过程中总有各种各样的需求。在使用el-table时，想 点击某行展示（或收起）更多 详细信息也是比较常见的一个。 本文使用expand来控制显示隐藏，使用效果如下： <el-table ref="tableList" :data="liveGoodArr" @sort-change="shortChange" v-loading='loading' :header-cell-style="{ background: '#2D3140', border: '#343648', color:
vue手风琴效果
qq_43205254的博客
11-15 43
{text: '播放/录制页面', bg: require('../../static/assets/images/home-pic/home-pic1.jpg'), img: '../../static/assets/images/home-pic/home-pic1.jpg'},
Vue实现手风琴效果
Kamto
08-11 3927
笔者在2年前曾用jquery写过一个手风琴组件，jquery提供的slideUp、slideDown方法简直就是给手风琴量身定做的，不仅能够获得内容的高度并正确打开，还能加上流畅的动画效果，这里动画效果请小伙伴们自行脑部一下哈~。然而两年后的今天。需要在vue中来做了，笔者是对代码有洁癖的人，不想使用js操作dom获取高度在设置动画，而是要使用vue中的transition标签来实现。最终的效果还...
Vue实现侧边菜单栏手风琴效果实例代码
08-27
Vue实现侧边菜单栏手风琴效果实例代码 本资源是关于使用 Vue 实现侧边菜单栏手风琴效果的实例代码。下面是对该资源的详细解析。 手风琴效果简介 手风琴效果是一种常见的交互效果，在许多 Web 应用程序中都可以...
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的手风琴组件
08-10
在这个项目中，"一个vue的手风琴组件" 是一个基于Vue.js构建的UI组件，它实现了手风琴效果，通常用于在有限的空间内展示可折叠的内容区域。手风琴组件常用于网站的导航、图片展示或者信息列表，通过点击标题展开或...
Vue.js手风琴菜单组件开发实例
10-19
Vue.js手风琴菜单组件开发实例是一个典型的前端开发应用场景，它展示了如何利用Vue.js框架创建交互式的、可展开和收起的菜单结构。手风琴菜单通常用于节省空间，只显示一个子菜单项，其余项则保持隐藏，直到用户点击...
js实现横向手风琴效果
06-09
在本教程中，我们将探讨如何使用JavaScript实现一个横向手风琴效果，这是一种常见的网页元素，常用于展示有限空间内的多个内容板块。 首先，我们需要理解手风琴效果的基本概念。手风琴效果通常指的是一个可以展开和...
vue手风琴效果（项目笔记1）
qq_44664690的博客
02-28 711
今天是我第一次接触项目，怀着激动的心情写下第一篇博客！不知道几年后的我还会不会从事前端。 首先看下我的代码 &lt;!--手风琴区域html区--&gt; &lt;div id="soufen"&gt; &lt;div class="soufens" v-for="item in accordion" :key="item.id"&gt;
【推拉框-手风琴】vue3实现手风琴效果的组件
qq_2511276124的博客
03-03 3408
在工作时有时会用到竖形手风琴效果的组件。 在此记录下实现代码和实现思路。
react学习笔记二--面向组件编程一（组件的概念、使用及三大属性）
weixin_50119334的博客
11-19 270
react元素 React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。 一个元素就像电影的单帧：它代表了某个特定时刻的 UI。 更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render() data-reactroot 表面当前元素是 该组件的顶层标签 react组件 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。 组件名称必须以大写字母开头。 **React 会将以
2021-09-10 工作记录-vue实现手风琴效果
weixin_48850734的博客
10-19 992
一、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实现手风琴效果
lwf0829的博客
11-22 985
利用鼠标移入移出事件实现内容出现隐藏 用到的知识点： 1.@mouseover 鼠标移入事件 2.@mouseout 鼠标移出事件 3.v-if 条件渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"> * {
vue手风琴竹简式展开
08-18
要实现vue手风琴的竹简式展开效果，可以按照以下步骤进行操作： 1. 首先，设置一个布尔变量来控制二级列表的显示与隐藏。可以在data中定义一个变量，比如isExpanded，并初始化为false。 2. 在模板中，使用v-if或v-show指令来根据isExpanded的值来控制二级列表的显示与隐藏。当isExpanded为true时，显示二级列表；当isExpanded为false时，隐藏二级列表。 3. 同步地，通过这个变量来控制展开或隐藏的图标切换。可以使用v-bind指令来动态绑定展开或隐藏图标的class。当isExpanded为true时，绑定展开图标的class；当isExpanded为false时，绑定隐藏图标的class。 4. 为一级选项创建点击事件，点击一级选项时要切换isExpanded的值。可以使用v-on指令来监听点击事件，并在对应的方法中修改isExpanded的值。 5. 最后，根据具体需求进行样式的调整和数据的渲染。 通过以上步骤，你就可以实现一个简单的vue手风琴竹简式展开效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue手风琴三种方式](https://download.csdn.net/download/ozhy111/12233205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue实现手风琴效果](https://blog.csdn.net/weixin_51138142/article/details/119851615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值