时间戳

首页 > 解决方案 > 如何在 ember js 中一次只打开一个菜单项？

ember.js - 如何在 ember js 中一次只打开一个菜单项？

问题描述

我们在 ember js 中有一个页面，它有多个菜单。单击图标时，菜单应打开，单击关闭按钮时，菜单应关闭。唯一的问题是，当您单击一个然后再单击第二个时，它们都同时打开，但我们想要的是一次只打开一个。对于如何解决这个问题，有任何的建议吗？

{{#if showMenu}}
 <div> Menu items </div>
{{/if}}

showMenu(){
  this.set('showMenu', true);
},
hideMenu(){
  this.set('showMenu', false);
},

标签： ember.js

解决方案

恕我直言，使用eq来自ember-truth-helpers

然后基本上这个js：

@tracked openMenu = null;
showMenu(name){
  this.openMenu = name;
},
hideMenu(){
  this.openMenu = null;
},

这个hbs：

<button {{on "click" (fn this.showMenu 'menuOne')}}>show one</button>
{{#if (eq this.openMenu "menuOne")}}
  show menu 1
{{/if}}

<button {{on "click" (fn this.showMenu 'menuTwo')}}>show two</button>
{{#if (eq this.openMenu "menuTwo")}}
  show menu 1
{{/if}}

<button {{on "click" this.hideMenu}}>close all</button>

推荐阅读