更改 alpine.js 中所有组件的属性？

Question

我用 alpine 创建了一个弹出菜单。 对于鼠标可访问性，我添加了一个计时器，以便在课程结束后菜单不会立即关闭（有关更多信息，请参见此处https://www.w3.org/WAI/tutorials/menus/flyout/ ）

我目前的问题是，如果我从一个下拉菜单移动到另一个下拉菜单，那么由于延迟关闭，我会在瞬间打开两个下拉菜单：

每个下拉菜单都是一个组件。 是否可以将所有下拉组件的属性open设置为 false？ 像这样的东西？

show() {
  forAllDropdownComponents.open=false;
  clearTimeout(this.$el.timer);
  this.open = true;
},

这是代码：

 function dropdown() { return { open: false, timer: '', show() { clearTimeout(this.timer); this.open = true; }, hide() { this.timer = setTimeout(() => { this.open = false; }, 300); } } }

 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.xx/dist/alpine.min.js"></script> <ul id="nav"> <li ><a href="#" >Somethong Else</a></li> <li > <div x-data="dropdown()"> <a href="#" @mouseover="show()" @mouseleave="hide()">Droppi</a> <ul x-show="open"> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> </ul> </div> </li> <li > <div x-data="dropdown()" class="relative"> <a href="#" @mouseover="show()" @mouseleave="hide()" >Droppi</a> <div x-show="open"> <ul > <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> </ul> </div> </div> </li> </ul>

Answer 1

似乎sestTimeOut一旦启动就无法停止，当您清除它时，它只会阻止下一个发生。