Блог

Используя 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 , если есть подменю.

В вашем вопросе недостаточно контекста, чтобы быть уверенным, чего вы пытаетесь достичь, но я предполагаю, что вы просто хотите, чтобы subOne было true, когда есть подменю 1, а subTwo было true, когда существует подменю 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() вместо него).