点击div切换前置位置功能故障：代码多次点击后元素消失

阿华AIGC实验室

2026-5-15

解决点击div前置后多次操作显示异常的问题

我来帮你梳理下问题所在，然后给出可行的解决方案：

问题根源

你当前的代码逻辑是两两交换点击元素和当前选中元素的层级、位置数据，这种方式在第一次点击时没问题，但多次操作后，所有元素的z-index和top数据会彻底混乱——因为每次只关注两个元素的交换，没有维护整体的层级秩序，最终导致元素被错误覆盖或位置偏移，出现显示异常。

修复方案

我们需要换一种思路：每次点击元素时，直接把它设为最顶层的选中状态，然后重新为所有其他元素分配对应的层级和位置，确保整体始终保持有序的层级结构。

修改后的完整代码

JavaScript

$(".haml-category").click(function() {
  // 先移除所有元素的选中标记
  $(".haml-category").removeClass("selected");
  // 将当前点击的元素标记为选中
  $(this).addClass("selected");
  
  // 定义所有元素的基准层级和位置（对应初始状态的有序配置）
  const baseConfigs = [
    { zindex: 0, top: 0 },
    { zindex: 1, top: 40 },
    { zindex: 2, top: 85 },
    { zindex: 3, top: 130 }
  ];
  
  // 获取除当前选中元素外的所有分类元素
  const otherElements = $(".haml-category").not(this);
  
  // 为非选中元素依次分配基准配置里的前三个层级/位置
  otherElements.each(function(index) {
    const config = baseConfigs[index];
    $(this)
      .data("zindex", config.zindex)
      .data("top", config.top)
      .css({
        "z-index": config.zindex,
        "top": `${config.top}px`
      });
  });
  
  // 给选中元素设置最高层级和对应位置
  const topConfig = baseConfigs[3];
  $(this)
    .data("zindex", topConfig.zindex)
    .data("top", topConfig.top)
    .css({
      "z-index": topConfig.zindex,
      "top": `${topConfig.top}px`
    });
});

CSS（微调优化）

.haml-category-container {
  position: relative;
  background-color:#ccc;
  min-height: 540px; /* 增加容器最小高度，避免元素溢出被截断 */
}
.haml-category {
  position: absolute;
  width: 100%;
  height: 500px;
  top: 0;
  right: 0;
  border: 1px solid black;
  transition: top 1s, z-index 0s; /* z-index过渡设为0，避免层级切换有延迟 */
}
.sec-saheb-bar { z-index: 0; top: 0; }
.sec-ranande { z-index: 1; top: 40px; }
.sec-barbar { z-index: 2; top: 85px; }
.sec-bazaryab { z-index: 3; top: 130px; }
.selected { 
  z-index: 3 !important; /* 确保选中状态的层级优先级最高 */
  top: 130px !important; 
}

HTML（保持原结构即可）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="haml-category-container">
  <div class="haml-category sec-saheb-bar" id="sec-saheb-bar" data-zindex="0" data-top="0">
    <h6>div1</h6>
    <p> content div1</p>
  </div>
  <div class="haml-category sec-ranande" id="sec-ranande" data-zindex="1" data-top="40">
    <h6>div2</h6>
    <p> content div2</p>
  </div>
  <div class="haml-category sec-barbar" id="sec-barbar" data-zindex="2" data-top="85">
    <h6>div3</h6>
    <p> content div3</p>
  </div>
  <div class="haml-category sec-bazaryab selected" id="sec-bazaryab" data-zindex="3" data-top="130">
    <h6>div4</h6>
    <p> content div4</p>
  </div>
</div>