Alpine.js xcollapse与Laravel组件、p标签配合失效问题

问题核心是HTML规范的DOM自动修正行为导致Alpine.js指令绑定失效：

• <p>标签属于文本级元素，HTML规范明确它不能包含块级元素（如<div>、带有display: block的<a>等）。
• 你的x-nav-link组件在:sub="true"时，大概率渲染成了块级元素（比如添加了块级样式的<a>）。浏览器解析到p标签内的块级元素时，会自动提前闭合p标签，导致<p x-show="expanded" x-collapse>变成空标签，内部的x-nav-link被“剥离”到外部，完全不受Alpine的x-show和x-collapse控制，所以始终处于展开状态。

你可以通过浏览器开发者工具查看渲染后的DOM结构，会发现p标签已被提前闭合，x-nav-link不在其内部。

解决办法 #

1. 改用<div>作为折叠容器：这是你已验证可行的方案，div是块级容器，无嵌套限制，能正常配合Alpine指令工作。
2. 调整x-nav-link组件样式（不推荐）：若一定要用p标签，需确保:sub="true"时组件渲染为行内/行内块元素（如添加display: inline-block样式），但p标签语义为段落，用来包裹导航链接不符合语义规范，后续可能引发兼容性问题。

正确代码示例 #

<div x-data="{ expanded: false }">
    <x-nav-link @click="expanded = ! expanded" :href="'#'" :active="false">{{ __('Collapse') }}</x-nav-link>

    <div x-show="expanded" x-collapse>
        <x-nav-link :href="/" :active="false" :sub="true">{{ __('Sub') }}</x-nav-link>
    </div>
</div>

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