手风琴效果(vue实现)

var $title = $(ev.target);

$title.parents(‘#app’).find(‘.item’).hide();

$title.next().show(1000);

}

}

})

源码2.

Document
    • {{item}}
    • https://www.cnblogs.com/Smiled/p/7610905.html

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

      如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素

      $(selector).toggle(speed,callback,switch)

      效果图:再点击时候只打开点击哪个的列表,其他的 关闭

      在这里插入图片描述在这里插入图片描述在这里插入图片描述

      安装 npm install --save-dev less-loader less

      -

      <button @click=“increment”>+

        {{item.name}}{{item.show}}

        • 5
          点赞
        • 6
          收藏
          觉得还不错? 一键收藏
        • 0
          评论
        Vue是一个流行的JavaScript框架,可以用于构建Web应用程序。要实现侧边栏手风琴效果,可以使用Vue的transition组件来实现动画效果,以及vue-router来管理路由。 下面是一个简单的侧边栏手风琴效果的代码示例: ``` <template> <div class="sidebar"> <ul> <li v-for="(item, index) in menuItems" :key="index" :class="{ active: activeIndex === index }" @click="toggleItem(index)"> <div class="title">{{ item.title }}</div> <transition name="slide"> <ul v-show="activeIndex === index"> <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex">{{ subItem }}</li> </ul> </transition> </li> </ul> </div> </template> <script> export default { data() { return { menuItems: [ { title: '菜单1', subItems: ['子菜单1', '子菜单2', '子菜单3'] }, { title: '菜单2', subItems: ['子菜单4', '子菜单5', '子菜单6'] }, { title: '菜单3', subItems: ['子菜单7', '子菜单8', '子菜单9'] }, ], activeIndex: null, }; }, methods: { toggleItem(index) { if (this.activeIndex === index) { this.activeIndex = null; } else { this.activeIndex = index; } }, }, }; </script> <style scoped> .sidebar { width: 200px; } .title { cursor: pointer; } ul { list-style: none; padding: 0; } li { border-bottom: 1px solid #ddd; } .active .title { background-color: #ddd; } .slide-enter-active, .slide-leave-active { transition: all 0.3s ease-out; } .slide-enter, .slide-leave-to { height: 0; overflow: hidden; } </style> ``` 在这个示例中,我们使用了一个包含菜单项和子菜单项的数组来生成侧边栏。我们使用v-for指令来循环渲染每个菜单项,并使用v-show指令根据当前激活的索引来显示或隐藏子菜单项。我们还使用了Vue的transition组件来添加动画效果,并通过activeIndex来跟踪当前激活的菜单项。 希望这可以帮助您了解如何使用Vue实现侧边栏手风琴效果
        评论
        添加红包

        请填写红包祝福语或标题

        红包个数最小为10个

        红包金额最低5元

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

        抵扣说明:

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

        余额充值