jQuery按钮交互问题：修复按钮位置与文本块显示异常

问题描述 #

点击按钮后出现两个异常：

• 按钮块固定在左侧，无法回到初始居中位置
• 激活后的文本块会消失

需求实现以下任一方案：

1. 再次点击按钮时移除crossRotate和showlink类，解决toggleClass导致的跳转异常
2. 点击按钮后文本块始终保持显示状态

方案1：支持按钮二次点击重置状态 #

修改点说明 #

1. 替换animation为transition，避免forwards属性导致按钮停留在左侧无法复位
2. 增加状态判断：点击按钮时，若对应内容已显示则执行复位操作，否则展开内容并移动按钮
3. 修正#boxtext选择器错误（原HTML中无该元素）

修改后的代码 #

JavaScript

$(document).ready(function() {
  $(".namebutton").click(function() {
    var targetDiv = $("#" + this.value);
    var buttonsContainer = $("#buttons");
    var boxLink = $("#boxlink");
    
    // 判断当前内容是否已显示
    if (targetDiv.is(":visible")) {
      // 复位：隐藏内容，移除类
      targetDiv.hide("slow");
      buttonsContainer.removeClass('crossRotate');
      boxLink.removeClass('showlink');
    } else {
      // 展开：显示对应内容，隐藏其他，添加类
      targetDiv.show("slow").siblings().hide("slow");
      buttonsContainer.addClass('crossRotate');
      boxLink.addClass('showlink');
    }
  });
});

CSS（修改crossRotate类）

.crossRotate {
  transition: transform 2s linear;
  transform: translateX(-100px);
}

方案2：点击后文本块始终保持显示 #

修改点说明 #

1. 将div.toggle("slow")改为div.show("slow")，确保内容点击后只显示不隐藏
2. 移除可能导致内容消失的逻辑，保证文本块持续可见
3. 按钮块的crossRotate类仅在首次点击时添加（或保持添加状态）

修改后的代码 #

JavaScript

$(document).ready(function() {
  $(".namebutton").click(function() {
    var targetDiv = $("#" + this.value);
    // 显示对应内容，隐藏其他内容，不使用toggle
    targetDiv.show("slow").siblings().hide("slow");
    // 确保按钮块和文本块的类始终存在
    $("#buttons").addClass('crossRotate');
    $("#boxlink").addClass('showlink');
  });
});

CSS（可选配置）

/* 若需要按钮固定在左侧，保留原动画 */
.crossRotate {
  animation: button 2s linear 0s 1 normal forwards;
}

@keyframes button {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}

/* 若需要按钮可复位，改用transition */
/* .crossRotate {
  transition: transform 2s linear;
  transform: translateX(-100px);
} */

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