基于按钮点击顺序实现div显示隐藏与位置动态调整的需求

直接上可运行的代码，核心逻辑是通过记录点击顺序来调整div的排列位置：

HTML 结构 #

<button id="btnA">Button A</button>
<button id="btnB">Button B</button>
<div class="container">
  <div id="divA" class="content">Div A</div>
  <div id="divB" class="content">Div B</div>
</div>

CSS 样式 #

.container {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

.content {
  width: 50%;
  height: 200px;
  display: none;
}

.content.show {
  display: block;
}

#divA {
  background-color: lightblue;
}

#divB {
  background-color: lightgreen;
}

JavaScript 逻辑 #

const btnA = document.getElementById('btnA');
const btnB = document.getElementById('btnB');
const divA = document.getElementById('divA');
const divB = document.getElementById('divB');
const container = document.querySelector('.container');

// 记录已显示div的点击顺序
let displayedOrder = [];

// 通用按钮点击处理函数
function handleButtonClick(targetDivId) {
  const targetDiv = document.getElementById(targetDivId);
  const isVisible = targetDiv.classList.contains('show');

  if (isVisible) {
    // 隐藏目标div
    targetDiv.classList.remove('show');
    // 从顺序数组中移除对应ID
    displayedOrder = displayedOrder.filter(id => id !== targetDivId);
    
    // 调整剩余div的位置
    if (displayedOrder.length === 1) {
      container.style.justifyContent = 'flex-end';
      // 重置order属性，避免影响后续操作
      document.getElementById(displayedOrder[0]).style.order = '';
    } else {
      container.style.justifyContent = 'flex-start';
    }
  } else {
    // 显示目标div
    targetDiv.classList.add('show');
    // 将ID加入顺序数组
    displayedOrder.push(targetDivId);
    
    if (displayedOrder.length === 1) {
      // 首次点击，让div靠右显示
      container.style.justifyContent = 'flex-end';
      targetDiv.style.order = '';
    } else if (displayedOrder.length === 2) {
      // 第二次点击，通过order属性调整顺序：首次点击的div在右，第二次的在左
      const firstDiv = document.getElementById(displayedOrder[0]);
      const secondDiv = document.getElementById(displayedOrder[1]);
      firstDiv.style.order = '1';
      secondDiv.style.order = '0';
      container.style.justifyContent = 'flex-start';
    }
  }
}

// 绑定点击事件
btnA.addEventListener('click', () => handleButtonClick('divA'));
btnB.addEventListener('click', () => handleButtonClick('divB'));

核心逻辑说明 #

• 用displayedOrder数组记录已显示div的点击顺序，以此区分首次和第二次点击的元素。
• 单个div显示时，通过容器的justify-content: flex-end让它靠右。
• 两个div都显示时，通过调整order属性，让首次点击的div排在右侧（flex布局中order值更大的元素靠后），第二次点击的排在左侧。
• 隐藏div后，自动调整剩余div的位置，保证单个div始终靠右显示。

内容的提问来源于stack exchange，提问作者Ed Roberts