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

【问题标题】：Use Alpine JS to conditionally add CSS class使用 Alpine JS 有条件地添加 CSS 类
【发布时间】：2021-01-31 17:15:24
【问题描述】：

使用 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。

【问题讨论】：

标签： javascript css alpine.js

【解决方案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() 代替）。

【讨论】：