Laravel10中Mary UI+Livewire Volt默认展开子菜单且不激活的方法

要实现子菜单默认展开且父项不激活，只需利用Mary UI <x-menu-sub> 组件的内置属性，结合Volt语法即可完成：

方法1：静态直接设置 #

直接在组件上显式指定expanded和active属性：

<x-menu-item title="xxxx" icon="o-building-storefront" link="/" />
<x-menu-item title="xxxxx" icon="o-shopping-cart" link="/" />
<x-menu-sub title="xxxxx" icon="o-cog-6-tooth" :expanded="true" :active="false">
    <x-menu-item title="xxxx" icon="o-wifi" link="####" />
    <x-menu-item title="xxxxx" icon="o-archive-box" link="####" />
</x-menu-sub>

• :expanded="true"：强制子菜单默认展开
• :active="false"：强制父菜单项不处于激活状态（即使子项路由匹配也不会激活父项）

方法2：Volt响应式状态控制（如需动态切换） #

如果后续需要通过交互控制菜单展开/折叠，可在Volt组件中定义状态变量：

<?php
use function Livewire\Volt\{state};

// 初始化状态为展开
state(['settingsMenuExpanded' => true]);
?>

<div>
    <x-menu-item title="xxxx" icon="o-building-storefront" link="/" />
    <x-menu-item title="xxxxx" icon="o-shopping-cart" link="/" />
    <x-menu-sub 
        title="xxxxx" 
        icon="o-cog-6-tooth" 
        :expanded="$settingsMenuExpanded" 
        :active="false"
    >
        <x-menu-item title="xxxx" icon="o-wifi" link="####" />
        <x-menu-item title="xxxxx" icon="o-archive-box" link="####" />
    </x-menu-sub>
</div>

这种方式可以通过Volt的方法动态修改$settingsMenuExpanded的值，实现菜单的展开/折叠切换，同时保持父项始终不激活。

内容的提问来源于stack exchange，提问作者newLaraveJoiner