在 Ember.js 中,可以通过使用组件和状态管理来实现一次只打开一个菜单项的功能。以下是一种实现方式:
这样,当用户点击菜单项时,只有当前点击的菜单项会打开,其他菜单项会关闭。
以下是一个示例代码:
菜单项组件(menu-item.js):
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class MenuItemComponent extends Component {
isOpen = false;
@action
toggleOpen() {
this.isOpen = !this.isOpen;
this.args.toggleItem(this.args.item);
}
}
菜单项组件的模板(menu-item.hbs):
{{#if this.isOpen}}
<h3>{{@item.title}}</h3>
<div>{{@item.content}}</div>
{{/if}}
<button {{action this.toggleOpen}}>{{@item.title}}</button>
菜单组件(menu.js):
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class MenuComponent extends Component {
@tracked activeItem = null;
@action
toggleItem(item) {
this.activeItem = item;
}
}
菜单组件的模板(menu.hbs):
{{#each this.menuItems as |item|}}
<MenuItem @item={{item}} @toggleItem={{this.toggleItem}} />
{{/each}}
请注意,以上示例代码仅为演示目的,实际使用时可能需要根据具体需求进行适当修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库(TencentDB)。
腾讯云云服务器(CVM)产品介绍链接地址:https://cloud.tencent.com/product/cvm
腾讯云云数据库(TencentDB)产品介绍链接地址:https://cloud.tencent.com/product/cdb
领取专属 10元无门槛券
手把手带您无忧上云