SvelteKit(TypeScript)侧边栏与下拉菜单切换失效求助

我正在用TypeScript开发SvelteKit仪表盘，想实现侧边栏显示/隐藏切换，但+page.svelte里的侧边栏和下拉菜单都没法正常工作。试了不少代码都没解决，包括用复选框切换类也无效，求正确的组件属性访问和功能实现方法。

原代码 #

<script type="ts">
let active = true;
</script>

<div class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
   <input type="checkbox" bind:checked={active} >
</div>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" />

<div class="bg-red-600">
   
  <span
    class="absolute text-white text-4xl top-5 left-4 cursor-pointer"  on:click={() => active = !active } >
    <i class="bi bi-filter-left px-2 bg-purple-500 rounded-md"></i>
  </span>
  <div 
  class:active={active} 
    class=" sidebar fixed top-0 bottom-0 lg:left-0 p-2 w-[300px] overflow-y-auto text-center bg-blue-900" >
    <div class="text-gray-100 text-xl">
      <div class="p-2.5 mt-1 flex items-center">
        <i class="bi bi-app-indicator px-2 py-1 rounded-md bg-blue-600"></i>
        <h1 class="font-bold text-gray-200 text-[15px] ml-3">Bugatom </h1>
        <i
          class="bi bi-x cursor-pointer ml-28 lg:hidden bg-green-500"
          on:click={() => active = !active}
        ></i>
      </div>
      <div class="my-2 bg-gray-600 h-[1px]"></div>
    </div>
    <div
      class="p-2.5 flex items-center rounded-md px-4 duration-300 cursor-pointer bg-gray-700 text-white"
    >
      <i class="bi bi-search text-sm"></i>
      <input
        type="text"
        placeholder="Search"
        class="text-[15px] ml-4 w-full bg-transparent focus:outline-none"
      />
    </div>
    <div
      class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"
    >
      <i class="bi bi-house-door-fill"></i>
      <span class="text-[15px] ml-4 text-gray-200 font-bold">Gallery Home</span>
    </div>
    <div
      class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"
    >
      <i class="bi bi-bookmark-fill"></i>
      <span class="text-[15px] ml-4 text-gray-200 font-bold">Bookmark</span>
    </div>
    <div class="my-4 bg-gray-600 h-[1px]"></div>
    <div
      class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"
      on:click={() => active = !active}
            >
      <i class="bi bi-chat-left-text-fill"></i>
      <div class="flex justify-between w-full items-center">
        <span class="text-[15px] ml-4 text-gray-200 font-bold">Chatbox</span>
        <span class="text-sm rotate-180" id="arrow" class:rotate={active}> <!--class:rotate-0={active}-->
          <i class="bi bi-chevron-down"></i>
        </span>
      </div>
    </div>
    <div
      class="text-left text-sm mt-2 w-4/5 mx-auto text-gray-200 font-bold"
      id="submenu" 
    >
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">
        Social
      </h1>
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">
        Personal
      </h1>
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">
        Friends
      </h1>
    </div>
    <div
      class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"
    >
      <i class="bi bi-box-arrow-in-right"></i>
    <span class="text-[15px] ml-4 text-gray-200 font-bold">Logout</span>

  </div>
</div>
</div>
  
<style>
  .active{
    visibility:hidden;
  }
  .rotate{
    transform: rotate(0deg);
  }
</style>

核心问题分析 #

1. 状态变量复用冲突：用同一个active变量控制侧边栏和下拉菜单，导致操作互相干扰
2. Svelte类绑定语法错误：class:active={active}和基础class分开写，Svelte无法正确解析
3. 元素遮挡：顶部的h-screen div覆盖了侧边栏的切换按钮，导致点击事件无法触发
4. 显示逻辑倒置：.active类设置visibility:hidden，但active初始为true，默认就隐藏了侧边栏，逻辑完全反了
5. 下拉菜单无状态绑定：子菜单没有和状态变量关联，无法实现展开/收起

修复后的完整代码 #

<script lang="ts">
  // 拆分状态变量，避免冲突
  let sidebarOpen = true;
  let chatboxOpen = false;
</script>

<!-- 移除遮挡按钮的全屏div，调整页面基础布局 -->
<div style="background: #edf2f7; min-height: 100vh;">
  <!-- 侧边栏切换按钮：添加z-index确保可点击 -->
  <span
    class="absolute text-white text-4xl top-5 left-4 cursor-pointer z-10"
    on:click={() => sidebarOpen = !sidebarOpen}
  >
    <i class="bi bi-filter-left px-2 bg-purple-500 rounded-md"></i>
  </span>

  <!-- 侧边栏：使用Svelte标准类绑定语法，结合过渡动画 -->
  <div 
    class="sidebar fixed top-0 bottom-0 lg:left-0 p-2 w-[300px] overflow-y-auto text-center bg-blue-900 transition-all duration-300 z-20"
    class:hidden={!sidebarOpen}
  >
    <div class="text-gray-100 text-xl">
      <div class="p-2.5 mt-1 flex items-center">
        <i class="bi bi-app-indicator px-2 py-1 rounded-md bg-blue-600"></i>
        <h1 class="font-bold text-gray-200 text-[15px] ml-3">Bugatom</h1>
        <i
          class="bi bi-x cursor-pointer ml-auto lg:hidden bg-green-500"
          on:click={() => sidebarOpen = !sidebarOpen}
        ></i>
      </div>
      <div class="my-2 bg-gray-600 h-[1px]"></div>
    </div>

    <div class="p-2.5 flex items-center rounded-md px-4 duration-300 cursor-pointer bg-gray-700 text-white">
      <i class="bi bi-search text-sm"></i>
      <input
        type="text"
        placeholder="Search"
        class="text-[15px] ml-4 w-full bg-transparent focus:outline-none"
      />
    </div>

    <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white">
      <i class="bi bi-house-door-fill"></i>
      <span class="text-[15px] ml-4 text-gray-200 font-bold">Gallery Home</span>
    </div>

    <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white">
      <i class="bi bi-bookmark-fill"></i>
      <span class="text-[15px] ml-4 text-gray-200 font-bold">Bookmark</span>
    </div>

    <div class="my-4 bg-gray-600 h-[1px]"></div>

    <!-- 下拉菜单切换按钮：绑定独立状态变量 -->
    <div
      class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"
      on:click={() => chatboxOpen = !chatboxOpen}
    >
      <i class="bi bi-chat-left-text-fill"></i>
      <div class="flex justify-between w-full items-center">
        <span class="text-[15px] ml-4 text-gray-200 font-bold">Chatbox</span>
        <!-- 箭头旋转：用条件类控制角度 -->
        <span class="text-sm" class:rotate-180={chatboxOpen}>
          <i class="bi bi-chevron-down"></i>
        </span>
      </div>
    </div>

    <!-- 下拉子菜单：用max-height实现平滑展开/收起 -->
    <div
      class="text-left text-sm mt-2 w-4/5 mx-auto text-gray-200 font-bold transition-all duration-300 overflow-hidden"
      style="max-height: {chatboxOpen ? '200px' : '0'}"
    >
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">Social</h1>
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">Personal</h1>
      <h1 class="cursor-pointer p-2 hover:bg-blue-600 rounded-md mt-1">Friends</h1>
    </div>

    <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white">
      <i class="bi bi-box-arrow-in-right"></i>
      <span class="text-[15px] ml-4 text-gray-200 font-bold">Logout</span>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" />

<style>
  /* 自定义隐藏类，配合Svelte绑定实现滑出效果 */
  .hidden {
    transform: translateX(-100%);
    visibility: hidden;
  }
</style>

关键修改说明 #

• 拆分状态变量：用sidebarOpen控制侧边栏显示，chatboxOpen控制下拉菜单，彻底避免状态冲突
• 修复类绑定：使用Svelte标准的class:hidden={!sidebarOpen}语法，将条件类和基础class合并
• 解决遮挡问题：移除遮挡按钮的全屏div，给切换按钮添加z-10层级确保可点击
• 调整显示逻辑：侧边栏默认显示，点击按钮后添加hidden类实现滑出隐藏，比单纯visibility:hidden更流畅
• 下拉菜单绑定：子菜单用max-height实现平滑展开/收起，箭头旋转状态和chatboxOpen绑定
• 优化布局：将ml-28改为ml-auto，让关闭按钮自动靠右，适配不同屏幕宽度

内容的提问来源于stack exchange，提问作者Mc-adams