如何解决具有相同控制器的嵌套元素
所以我有一个例子,我有一个默认隐藏的列表,当你点击一个按钮时,它会切换可见性。
这是我的控制器
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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。