Question

我的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'})
    }};

Answer 1

删除else语句中的-符号。因为-*anything成了分钟。所以你的代码永远不会回到原来的位置

＆＃13;

$(".col-md-3").on("click", boxMove);

function boxMove() {
    var offset = $(this).offset();
    var sign = (offset.left < 0) ? 1 : -1;
    console.log(sign)
    if (sign < 0) {
        $(this).animate({
        left: (sign * 10) +'px',
        top: (sign * 10) + 'px'})
    } else {
        $(this).animate({
        left: (sign * 10) +'px',//remove the `-`
        top: (sign * 10) + 'px'})// remove the `-`
    }};

＆＃13;

.col-md-3{
left:10px;
position:absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="col-md-3">hello</p>

＆＃13;

另一种方法 toggleClass()和css transition

＆＃13;

$(".col-md-3").on("click", boxMove);

function boxMove() {
    $(this).toggleClass('left') //same effect with toggle
   };

＆＃13;

.col-md-3{
left:100px;
top:100px;
position:absolute;
transition:all 0.5s ease-in; /*its give the animation effect*/
}
.left{
left:0px;/* add the top and left rule as your wish*/
top:0px;
}
/*is above not working try with !important command do like this 
.left{
left:0px !important;
top:0px !important;
}*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="col-md-3">hello</p>

＆＃13;

Answer 2

@prasad感谢您提供一个非常简单的答案。我添加了你建议的css代码：

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

}

并在.js文件中：

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

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

这会给你一个小小的点击＆＃39;对我的文本框有影响（类似于单击一个小按钮时）。但我没有包括这部分：

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

因为它以某种方式使.col-md-3下的所有6个文本框在彼此之上排列。再次感谢！

如何让文本框在click（jQuery）上移回？

2 个答案: