Javascript 如何使文本框在单击时向后移动（jQuery）？

在我的html文件中有一个具有相同类名的文本框，我希望单击时所有文本框都向上移动。但是如果它已经被点击了，我希望它移到原始状态。我已经编写了下面的代码，但如果再次单击，它只能向上移动，不能向下移动。 请帮忙。谢谢你

$(".col-md-3").on("click", boxMove);

function boxMove() {
    var offset = $(this).offset();
    var sign = (offset.left < 0) ? 1 : -1;
    if (sign < 0) {
        $(this).animate({
        left: (sign * 10) +'px',
        top: (sign * 10) + 'px'})
    } else {
        $(this).animate({
        left: (sign * -10) +'px',
        top: (sign * -10) + 'px'})
    }};

$（.col-md-3”）。打开（“单击”，移动框）；
函数boxMove（）{
var offset=$（this.offset（）；
变量符号=（偏移量左<0）？1:-1；
if（符号<0）{
$（此）。设置动画({
左：（符号*10）+“px”，
顶部：（符号*10）+“px'}）
}否则{
$（此）。设置动画({
左：（符号*-10）+“px”，
顶部：（符号*-10）+‘px’}）
}};

删除else语句中的

-

符号。因为

-*任何东西都变成了分钟。所以您的代码永远不会回到原始位置


$（.col-md-3”）。打开（“单击”，移动框）；
函数boxMove（）{
var offset=$（this.offset（）；
变量符号=（偏移量左<0）？1:-1；
控制台日志（签名）
if（符号<0）{
$（此）。设置动画({
左：（符号*10）+“px”，
顶部：（符号*10）+“px'}）
}否则{
$（此）。设置动画({
左：（符号*10）+px'，//移除`-`
顶部：（符号*10）+'px'}）//删除`-`
}};
.col-md-3{
左：10px；
位置：绝对位置；
}

您好
@prasad感谢您提供了一个漂亮简单的答案。
我已经按照您的建议添加了css代码：

.left {
  left:-5px;
  top: -5px;
  position: relative;

}

在.js文件中：

$(".col-md-3").on("click", boxMove);

function boxMove() {
    $(this).toggleClass('left')
};

这会在我的文本框上产生一个小的“点击”效果（类似于单击一个小按钮）。但我没有包括这一部分：

.col-md-3{
left:100px;
top:100px;
position:absolute;
transition:all 0.5s ease-in; /*its give the animation effect*/
}

因为不知何故，它使.col-md-3下的所有6个文本框相互对齐。
再次感谢
 你到底不想做什么？你可以使用toggleClass和hasClass来检查当前状态是否被移动。谢谢@prasad。但是，在我从if/else语句中删除“-”符号后，它仍然不起作用：/它正在处理我的代码片段。最好您可以使用
hello
。更新您的问题谢谢@prasad。只有当我调整窗口大小而不更改CSS代码时，它才起作用！？！当我添加CSS代码position:absolute时，当我单击文本框时，它会移动到屏幕的上部。（我只希望它向上移动+向左移动一点，达到10px，类似于“点击按钮”的效果）。但是，这种效果在正常大小的windown浏览器中不起作用（没有最小化窗口），我已经在Chrome v.58.3029和Firefox v.53.03中试用过了。@Lililashka查看我的更新答案。我被添加了另一个使用
toggleClass
的方法。使用
改变你的
左和顶部的位置。左
css。肯定是回到原来的位置了