Javascript 使用Alpine JS在类中切换元素？

我正在试用Alpine JS，来自jQuery。我如何在阿尔卑斯jS中做到这一点

$（'a'）。在（'click'）上，函数（e）{
$（'div'）.not（'.+$（this.data（'class'））.hide（'slow'）；
$（'.+$（this.data（'class'））.slideToggle（）；
});
a{
显示：块；
}
div{
显示：无；
}

A.
A.
A.
B
B
查看他们的GitHUb页面，查看可用指令列表及其作用



x-data声明了一个新的组件范围。
将要切换的元素包装在父div中，并初始化
x-data
指令，并将
{show:false}
设置为隐藏以下子元素


x-show切换
显示：无
（对或错）。然后设置子元素
x-show=“show”


@click=>x-on将事件侦听器附加到元素。发出时执行JS表达式。在click元素上，设置
x-On
指令，或使用
@
符号=>
@click=
将其设置为显示隐藏元素<代码>@click=“show”

。此外，我们使用

@click=“show=！show

在禁用时显示，或在启用时隐藏

x-text的工作原理与x-bind类似，但会更新元素的内部文本。设置元素中的文本，并在true/false=>

x-text=“show？”时使用条件进行更改隐藏所有B'：“显示所有B'”

x-transition用于将类应用于元素转换的各个阶段的指令

显示全部A
A.
A.
A.
显示全部B
B
B
B

谢谢！很接近了。html是生成的，我没有将所有A和B整齐地收集到单独的div中，所以我需要将其应用到“带x的所有div”“等等。当你点击A时，它应该隐藏所有B，反之亦然。我在上面的代码中添加了一个解决方案，虽然有些冗余，但效果很好。另外，我猜幻灯片在Alpine中没有默认包含。谢谢你抽出时间。我会仔细阅读这一切。