vue实现手风琴效果

最新推荐文章于 2025-04-26 10:44:54 发布

慕筱佳丶

最新推荐文章于 2025-04-26 10:44:54 发布

阅读量6.3k

点赞数 3

分类专栏： Vue 文章标签： vue

幕筱佳丶

本文链接：https://blog.youkuaiyun.com/weixin_51138142/article/details/119851615

版权

本文通过Vue详细讲解如何实现手风琴效果，包括设置控制二级列表显示隐藏的布尔变量，切换展开/隐藏图标，以及一级选项的点击事件处理。示例代码包括HTML、CSS和JS部分，演示了如何在实际项目中结合模拟数据或接口获取的真实数据进行页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

心语：我要你知道，在这个世界上总有一个人是等着你的，不管在什么时候，不管在什么地方，反正你知道，总有这么个人。

在使用vue的过程中，我们难免会碰见各种各样的需求，本篇文章我将实现一个简单的手风琴效果
首先先说一下手风琴实现的流程：
1.设置一个布尔变量来控制二级列表的显示与隐藏
2.同步的通过这个变量来控制展开或者隐藏的图标切换
3.为一级选项创建点击事件，点击一级选项的同时要展开二级列表

接下来，我们就使用代码具体实现

HTML

<div class="tree" id="my">
			<ul>
				<li class="item" v-for="list in lists">
					<a href="#" class="title" @click="curShow(list)">
					{
  {list.name}}
					<b :class="list.flag?'down':'up'">^</b>
					</a>
					<ul class="p_item" v-show=

最低0.47元/天解锁文章