使用Alpine JS有条件地添加CSS类

Question

使用Alpine JS，是否有一种方法可以检查子菜单并在父nav上切换类?

我知道如何通过单击事件切换x-data的值，是否可以添加到嵌套的ul以将x-data的值从false切换到true?

下面是一个例子:

<nav x-data="{subOne: false, subTwo: false}" :class="{ 'has-sub-menu-1': subOne, 'has-sub-menu-2': subTwo}">        
<ul>
<li>Menu Item
<ul>
<li>Sub Menu 1
<ul>
<li>Sub Menu 2</li>
<ul>
</li>
<ul>
</li>
<ul>
</nav> 

我想能够切换x-data值true，如果有子菜单。

Answer 1

您的问题中没有足够的上下文来确定您想要实现的目标，但我假设您只是希望subOne在有子菜单1时为真，而subTwo在子菜单2存在时为真。

如果你是从后端生成菜单，为什么不做一些类似

的事情呢?

<nav class="{{ $menuItem->getSubMenu() ? 'has-sub-menu-1' : '' }}{{ $menuItem->getSubMenu()?->getSubMenu() ? ' has-sub-menu-2' : '' }}"> 
<ul>
<li>{{ $menuItem->name }}</li>
@if ($subMenuItem = $menuItem->getSubMenu())
<ul>
<li>{{ $subMenuItem->name }}
@if ($subMenuItemTwo = $subMenuItem->getSubMenu())
<ul>
<li>{{ $subMenuItemTwo->name }}</li>
</ul>
@endif
</li>
</ul>
@endif
</nav>

如果你正在使用AlpineJS从一些数据源实际构建菜单，请包括完整的代码。在本例中，您可以从已有的数据结构中构建:class的条件。

如果不知道菜单是如何生成的，实际上很难给你任何建议，但是上面的伪代码应该让你知道你的选项是什么。

(请注意，上面的代码使用PHP 8语法，如果你使用Laravel你可以使用optional($menuItem->getSubMenu())->getSubMenu()代替)。