stimulusjs - 具有具有相同 Controller 的嵌套元素

Question

所以我有这种情况，我有一个默认隐藏的列表，当您单击一个按钮时，它会切换可见性。

这是我的 Controller

import { Controller } from "stimulus";

export default class extends Controller {
    static targets = ["collapsible", "information"]

    toggle() {
        this.element.classList.toggle("collapsible__open");
    }

    connect() {
        this.ensureCollapsibleHidden();
        super.connect();
    }

    ensureCollapsibleHidden() {
        this.element.classList.remove("collapsible__open");
        this.collapsibleTarget.classList.add("collapsible");
    }
}

这工作得很好。

但是，在可折叠列表中我还有其他可折叠项目。

这就是我想要的

这是代码

    header[
    class="w-full flex justify-end items-center relative"
    data-controller="collapse"
    ]

      button[
      data-action="click->collapse#toggle"
      ]
      | show 
      div[class="collapsible "]
        header
          h1[class="text-md" style="color: #8D95B6" ]
            = t 'informational.actions'
        ul[class="my-2 text-sm space-y-3 flex flex-col"]
          li[
          class="flex w-full justify-between items-center text-black"
          data-controller="collapse"
          data-action="mouseover->collapse#toggle mouseout->collapse#toggle" <------------ this mess stuff up
          ]
            = t 'inbox.snooze'
            svg class="w-4 h-4" fill="none" stroke="currentColor" viewbox=("0 0 24 24") xmlns="http://www.w3.org/2000/svg"
              path d=("M9 5l7 7-7 7") stroke-linecap="round" stroke-linejoin="round" stroke-width="2"


           Inner collapsible component
            ul[
            class="collapsible"
            style="right: -9.7rem"
            ]
              li[class="block px-4 py-1"]
                | 1 Hour
              li[class="block px-4 py-1"]
                | 4 Hours

在当前的实现中，当我点击显示时，两个可折叠对象都会显示

Answer 1

我假设您希望第一次点击显示第一个菜单，然后第二次点击显示子菜单？

如果是这样，您需要将数据元素(如 aria-expanded)添加到第一个菜单，然后在首次展开时将其设置为 true。然后将其用作刺激 Controller 中的条件，仅当第一个子菜单的 aria-expanded 设置为 true 并且您检测到点击时，才将第二个子菜单的可见性设置为 true。