如何使用AlpineJS的toggle开关实现不同内容的切换显示？

解决方案 #

你现有代码的核心问题是x-data的作用域仅绑定在开关所在的div上，下方的内容区域无法读取到toggle变量的状态，因此无法实现联动显隐。只需做2处核心调整即可实现需求：

1. 新增一个外层父容器包裹所有相关元素，将x-data定义在这个父容器上，确保所有需要用到toggle状态的元素都在作用域内
2. 给两个需要切换显隐的内容块分别添加x-show指令，绑定对应的toggle状态判断条件

下面是完整可运行的修改后代码：

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!-- 新增外层父容器定义x-data，覆盖所有需要联动的元素 -->
<div x-data="{toggle: '0'}">
  <div class="flex justify-center items-center mt-8">              
    <span class="block mr-3 text-xs">Residential</span>
    <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
         :class="[toggle === '1' ? 'bg-black' : 'bg-gray-300']">
      <label for="toggle"
             class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
             :class="[toggle === '1' ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']"></label>
      <input type="checkbox" id="toggle" name="toggle"
             class="appearance-none w-full h-full active:outline-none focus:outline-none"
             @click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
    </div> 
    <span class="block ml-3 text-xs">Business</span>
  </div>

  <!-- 给内容块绑定x-show控制显隐 -->
  <div id="toggleOff" x-show="toggle === '0'">页面加载和开关关闭时显示该内容，开关打开时隐藏</div>
  <div id="toggleOn" x-show="toggle === '1'">开关点击打开时显示该内容，其他状态隐藏</div>
</div>

额外说明：我顺便调整了开关的背景色逻辑，原来的代码不管开关状态都是黑色，现在关闭状态会显示浅灰色，视觉反馈更清晰，如果不需要可以改回原来的配置。

内容的提问来源于stack exchange，提问作者John K Bell