0

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

这是我的控制器

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

使用当前的实现，当我单击显示时，两个可折叠项都会显示

在此处输入图像描述

4

1 回答 1

0

我假设您想要第一次单击以显示第一个菜单，然后再次单击以显示子菜单？

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

于 2021-03-20T20:23:33.253 回答