具有相同控制器的嵌套元素

问题描述

所以我有一个例子，我有一个默认隐藏的列表，当你点击一个按钮时，它会切换可见性。

这是我的控制器

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

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

解决方法

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

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