移动端折叠面板+桌面端侧边栏布局适配方案求助

原问题与痛点 #

现有布局在桌面端是侧边栏标签切换样式，但移动端无法转为折叠面板结构（需要标题1紧跟内容1，再标题2紧跟内容2）。之前尝试移动DOM元素需在窗口切换时恢复结构，操作繁琐；先做折叠面板再适配桌面端，侧边栏效果不符合预期。

以下是无需移动DOM、仅用CSS+JavaScript实现的适配方案：

1. 调整HTML结构 #

将每个标题与对应内容放在同一个容器内，让移动端天然具备折叠面板的结构基础，桌面端通过CSS重新排列布局：

<div class="collapsible-container">
  <!-- 折叠项1 -->
  <div class="collapsible-item">
    <div class="collapsible-title is-active">
      Title 1
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
    <div class="collapsible-content is-active">
      <h3>Title 1 Content</h3>
      <p>Lorem Ipsum is simply dummy text.</p>
    </div>
  </div>
  <!-- 折叠项2 -->
  <div class="collapsible-item">
    <div class="collapsible-title">
      Title 2
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
    <div class="collapsible-content">
      <h3>Title 2 Content</h3>
      <p>Lorem Ipsum has been the industry's standard dummy text.</p>
    </div>
  </div>
</div>

2. CSS适配逻辑 #

通过媒体查询区分移动端与桌面端，用Flex布局的order属性重新排列标题和内容的位置，无需修改DOM：

/* 移动端默认样式：折叠面板 */
.collapsible-container {
  width: 100%;
}

.collapsible-title {
  padding: 1rem;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
}

.collapsible-title:hover {
  background-color: #eee;
}

.collapsible-title.is-active i {
  transform: rotate(90deg); /* 箭头旋转表示展开状态 */
  transition: transform 0.3s ease;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1rem;
  background-color: #fff;
}

.collapsible-content.is-active {
  max-height: 500px; /* 足够容纳内容的高度，可根据实际调整 */
  padding: 1rem;
}

/* 桌面端样式：侧边栏标签布局 */
@media (min-width: 768px) {
  .collapsible-container {
    display: flex;
    flex-wrap: wrap;
    height: 300px; /* 可根据需求设置固定高度 */
  }

  .collapsible-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  /* 所有标题统一放到左侧25%宽度区域 */
  .collapsible-title {
    width: 25%;
    order: 1;
    border-bottom: 1px solid #eee;
  }

  /* 所有内容统一放到右侧75%宽度区域 */
  .collapsible-content {
    width: 75%;
    order: 2;
    max-height: unset;
    overflow: visible;
    padding: 1.5rem;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  /* 桌面端仅展示激活项的内容 */
  .collapsible-content:not(.is-active) {
    display: none;
  }
}

3. JavaScript交互逻辑 #

根据窗口宽度区分交互：桌面端是标签切换（仅一个激活项），移动端是独立折叠（可展开多个，也可改为仅一个），同时处理窗口缩放时的状态同步：

// 标题点击事件
$(".collapsible-title").on("click", function() {
  const $title = $(this);
  const $content = $title.next(".collapsible-content");
  const isActive = $title.hasClass("is-active");
  const isDesktop = window.innerWidth >= 768;

  if (isDesktop) {
    // 桌面端：切换当前项，关闭其他所有项
    $(".collapsible-title").removeClass("is-active");
    $(".collapsible-content").removeClass("is-active");
    if (!isActive) {
      $title.addClass("is-active");
      $content.addClass("is-active");
    }
  } else {
    // 移动端：仅切换当前项的展开/收起
    $title.toggleClass("is-active");
    $content.toggleClass("is-active");
  }
});

// 窗口缩放时同步状态，避免状态混乱
$(window).on("resize", function() {
  const isDesktop = window.innerWidth >= 768;
  if (isDesktop) {
    // 桌面端确保至少有一个激活项
    const activeTitles = $(".collapsible-title.is-active");
    if (activeTitles.length === 0) {
      $(".collapsible-title").first().addClass("is-active");
      $(".collapsible-content").first().addClass("is-active");
    } else if (activeTitles.length > 1) {
      // 仅保留第一个激活项，关闭其他
      activeTitles.not(":first").removeClass("is-active");
      $(".collapsible-content.is-active").not(":first").removeClass("is-active");
    }
  }
});

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