实现双面板交互：hover占2/3宽度、点击全屏的前端技术问询

没问题，我帮你搞定这个双面板交互的首页！下面是完整的可运行代码，我还会把关键逻辑给你讲清楚：

HTML 结构 #

先搭建最基础的页面结构，一个容器包裹两个面板：

<div class="container">
  <div class="panel panel--left">
    <h2>左侧区块</h2>
  </div>
  <div class="panel panel--right">
    <h2>右侧区块</h2>
  </div>
</div>

CSS 样式 #

用Flex布局来实现宽度比例控制，同时加上过渡动画让交互更丝滑：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100vh;
  overflow: hidden; /* 避免页面滚动 */
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.panel {
  flex: 1; /* 初始状态：两个面板各占1/2宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: flex 0.3s ease; /* 宽度变化的平滑过渡 */
}

.panel--left {
  background-color: #2c3e50;
}

.panel--right {
  background-color: #3498db;
}

/* 悬停状态：当前面板占2/3，另一个占1/3 */
.panel:hover {
  flex: 2;
}

/* 点击激活状态：面板占满整个页面 */
.panel.active {
  flex: 999; /* 足够大的数值确保占满空间 */
}

/* 激活状态下，另一个面板收缩隐藏 */
.panel.active ~ .panel {
  flex: 0;
  opacity: 0;
  transition: opacity 0.3s ease, flex 0.3s ease;
}

JavaScript 交互逻辑 #

补全你提供的代码片段，实现悬停和点击的状态切换，同时处理状态冲突：

const leftPanel = document.getElementsByClassName('panel--left')[0];
const rightPanel = document.getElementsByClassName('panel--right')[0];
const container = document.querySelector('.container');

// 鼠标悬停处理函数
const mouseEnterHandler = e => {
  // 先移除点击激活状态，避免冲突
  leftPanel.classList.remove('active');
  rightPanel.classList.remove('active');
  
  // 设置悬停时的宽度比例
  if (e.target === leftPanel) {
    leftPanel.style.flex = '2';
    rightPanel.style.flex = '1';
  } else {
    rightPanel.style.flex = '2';
    leftPanel.style.flex = '1';
  }
};

// 鼠标离开容器时恢复初始状态（未点击激活的情况下）
const mouseLeaveHandler = () => {
  if (!leftPanel.classList.contains('active') && !rightPanel.classList.contains('active')) {
    leftPanel.style.flex = '1';
    rightPanel.style.flex = '1';
  }
};

// 点击面板处理函数
const clickHandler = e => {
  // 移除所有激活状态
  leftPanel.classList.remove('active');
  rightPanel.classList.remove('active');
  // 给当前点击的面板添加激活类
  e.target.classList.add('active');
};

// 绑定所有事件
leftPanel.addEventListener('mouseenter', mouseEnterHandler);
rightPanel.addEventListener('mouseenter', mouseEnterHandler);
container.addEventListener('mouseleave', mouseLeaveHandler);
leftPanel.addEventListener('click', clickHandler);
rightPanel.addEventListener('click', clickHandler);

关键逻辑说明 #

• Flex比例控制：核心用flex-grow属性（即flex缩写）来分配宽度：
  • 初始flex:1 → 两个面板平分宽度
  • 悬停时flex:2 vs flex:1 → 2/3和1/3的宽度比例
  • 点击激活后flex:999 vs flex:0 → 一个占满页面，另一个隐藏
• 过渡动画：给面板添加transition属性，让宽度变化和透明度变化都有平滑的动画效果，提升用户体验
• 状态冲突处理：悬停时先清除点击激活的状态，避免两种交互状态同时生效；鼠标离开时只在未激活的情况下恢复初始宽度

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