优化jQuery侧边栏菜单：解决首次加载折叠后需双击才能展开的逻辑问题

<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<!-- 确保引入了jQuery库 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- 如果需要Bootstrap的JS功能，这里仅作示例，与核心问题无关 -->

<div class="page-container">
  <div class="sidebar-menu">
    <div class="logo">
      <a href="#" class="sidebar-icon">
        <svg width="37" height="26" viewBox="0 0 37 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M27.6667 9.33333H2M35 2H2M35 16.6667H2M27.6667 24H2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
    </div>
    <div class="menu">
      <ul id="menu">
        <li><a href="#">
          <svg width="36" height="33" viewBox="0 0 36 33" fill="none" xmlns="http://www.w3.org/2000/svg">...</svg>
          <span>Counseling</span></a></li>
        <li><a href="#">
          <svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">...</svg>
          <span>Coaching</span></a></li>
        <!-- 更多菜单项 -->
      </ul>
    </div>
  </div>
</div>

/* 页面容器在侧边栏折叠时的样式 */
.page-container.sidebar-collapsed {
  padding-right: 0; /* 假设侧边栏在左侧，这里可能是调整主内容区域 */
  transition: all 100ms linear;
  transition-delay: 300ms;
}

/* 页面容器在侧边栏展开时的样式 */
.page-container.sidebar-collapsed-back {
  padding-right: 0;
  transition: all 100ms linear;
}

/* 侧边栏菜单在折叠时的宽度 */
.page-container.sidebar-collapsed .sidebar-menu {
  width: 75px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

/* 侧边栏菜单在展开时的宽度 */
.page-container.sidebar-collapsed-back .sidebar-menu {
  width: 280px;
  transition: all 100ms ease-in-out;
}

/* 侧边栏图标在折叠和展开时的旋转 */
.page-container.sidebar-collapsed .sidebar-icon {
  transform: rotate(90deg);
  transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed-back .sidebar-icon {
  transform: rotate(0deg);
  transition: all 300ms ease-in-out;
}

/* 菜单项文本在折叠时隐藏，展开时显示 */
.page-container.sidebar-collapsed #menu span {
  opacity: 0;
  transition: all 50ms linear;
}

.page-container.sidebar-collapsed-back #menu span {
  opacity: 1;
  transition: all 200ms linear;
  transition-delay: 300ms;
  padding-left: 10px;
}

/* 侧边栏基础样式 */
.sidebar-menu {
  position: fixed;
  float: left;
  width: 280px; /* 默认展开宽度 */
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #5B79A1;
  color: #fff;
  z-index: 1031;
}

/* 其他菜单相关样式 */
#menu { /* ... */ }
#menu li { /* ... */ }
/* ... */

var toggle = true;
$(".page-container").addClass("sidebar-collapsed"); // 页面加载时侧边栏被折叠

$(".sidebar-icon").click(function() {
    if (toggle) // 此时 toggle 为 true
    {
        // 这段代码的意图是“折叠”，但侧边栏已经折叠了
        $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
        $("#menu span").css({"position":"absolute"});
    }
    else
    {
        // 这段代码的意图是“展开”
        $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
        setTimeout(function() {
            $("#menu span").css({"position":"relative"});
        }, 400);
    }
    toggle = !toggle; // toggle 变为 false
});

// 修正：将toggle的初始值设置为 false，以匹配侧边栏在页面加载时默认折叠的视觉状态
var toggle = false; 

// 在页面加载时，通过添加CSS类使侧边栏默认折叠
$(".page-container").addClass("sidebar-collapsed");

$(".sidebar-icon").click(function() {
    if (toggle) // 如果 toggle 为 true (表示当前是展开状态，点击后应折叠)
    {
        $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
        $("#menu span").css({"position":"absolute"});
    }
    else // 如果 toggle 为 false (表示当前是折叠状态，点击后应展开)
    {
        $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
        setTimeout(function() {
            $("#menu span").css({"position":"relative"});
        }, 400);
    }
    toggle = !toggle; // 每次点击后翻转状态
});