vue 导航栏打开，关闭功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2719 天前的主题，其中的信息可能已经有所发展或是发生改变。

Markdown
如何实现打开当前，关闭其他
例如：打开导航一，自动关闭导航二
谢谢

导航

关闭

打开

Vue

3 条回复 • 2017-07-14 11:54:38 +08:00

ss098

2017-07-14 10:42:07 +08:00

这个是 Element 的导航组件吧？可以配置参数 unique-opened。

http://element.eleme.io/#/zh-CN/component/menu

scofieldpeng

2017-07-14 10:53:37 +08:00

最简单的,每个导航取一个唯一不冲突的名字,然后设置一个变量显示当前打开的是哪一个导航,写一个函数,判断这个变量的值是否为该导航的名字,是就展开,不是就关闭,当用户打开展开某个导航的时候把变量值设置为该导航的名字,

Sapp

2017-07-14 11:54:38 +08:00

如果不需要设置为一次只能展开一个:
<div @click="$event.currentTarget.classList.toggle('active')"></div>
需要设置:
<div :class="[activeNavName]" @click="activeNavName = xxx"></div>