Bootstrap 4+JQuery元素点击切换后无法恢复初始状态问题排查

嘿，我来帮你捋捋这个问题的根源和解决办法哈！你遇到的“点击按钮只能切换到新状态，没法回退初始状态”的情况，大概率是这几个原因：

• 没保存元素的初始状态：第一次点击时你直接修改了元素的样式/位置，但没把它原本的样式值（比如position、top、left这类属性）存下来。等第二次点击时，代码根本不知道该恢复到什么原始值，自然就没法回到初始位置啦。
• 用了单向的样式修改逻辑：如果你的代码是类似这种写法：

  $('#myBtn').click(function(){
    $('#targetElem').css('left', '300px');
  });
  

  那每次点击都会把元素的left强制设为300px，完全没有反向恢复的逻辑，点第二次当然不会变回去。
• 动画/样式修改没做状态判断：要是你用了animate()这类方法，可能只写了从初始到目标的动画，没判断当前元素处于哪个状态，也就没法触发反向的恢复动画。

针对这些问题，给你几个靠谱的解决思路，按推荐程度排序：

1. 优先用CSS类切换（最简洁稳定） #

把初始样式和点击后的样式分别写成两个CSS类，然后用jQuery的toggleClass()方法来回切换——这是最推荐的方式，代码简洁还不容易出错，甚至能加过渡动画提升体验。

示例代码：

/* 初始样式类 */
.target-box {
  position: relative;
  left: 0;
  background-color: #fff;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 点击后的样式类 */
.target-box.active {
  left: 250px;
  background-color: #4285f4;
}

$('#toggleBtn').click(function(){
  $('.target-box').toggleClass('active');
});

2. 用data属性保存初始状态 #

如果必须要直接修改CSS，那就在页面加载时把元素的初始样式存到它的data-*属性里，点击时判断当前状态来切换：

$(document).ready(function(){
  const $target = $('#targetElem');
  // 页面加载时保存初始样式到data属性
  $target.data('originLeft', $target.css('left'));
  $target.data('originBg', $target.css('background-color'));
});

$('#toggleBtn').click(function(){
  const $target = $('#targetElem');
  const currentLeft = $target.css('left');
  const originLeft = $target.data('originLeft');

  if(currentLeft === originLeft){
    // 切换到目标状态
    $target.css({
      left: '250px',
      backgroundColor: '#4285f4'
    });
  } else {
    // 恢复初始状态
    $target.css({
      left: originLeft,
      backgroundColor: $target.data('originBg')
    });
  }
});

3. 动画的双向切换逻辑 #

如果用了jQuery的animate()方法，记得用一个data属性标记当前状态，点击时根据状态触发正向或反向动画：

$('#toggleBtn').click(function(){
  const $target = $('#targetElem');
  // 用data属性标记当前是否处于激活状态，默认是false
  const isActive = $target.data('isActive') || false;

  if(isActive){
    // 恢复初始位置
    $target.animate({left: 0}, 300);
  } else {
    // 移动到目标位置
    $target.animate({left: 250}, 300);
  }
  // 切换状态标记
  $target.data('isActive', !isActive);
});

你可以对照自己的代码看看，是不是属于上面某一种情况——比如是不是只写了单向的样式修改，没做状态判断或者用类切换~

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