我刚刚创建了一个页面来理解jQuery切换函数。通过单击块“P”,我希望块“A”设置动画,再次单击它将撤消动画。(例如,假设块“A”设置100px左侧的动画;然后当我再次单击块“P”时,它将重置为0px;)
我对jQuery一无所知,所以一步一步的指导将非常有用。
这是我的代码:

$(document).ready(function() {
  $(".nav").on("click", function() {
    $(".trigger-default").animate({
      left: "140px"
    })
  })
})

span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}

<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

最佳答案

这将分配leftVal = 0style="left: 0;"元素(如果它有.trigger-default),否则将分配left: 140px;leftVal = "140px"

$(document).ready(function() {
  $(".nav").on("click", function() {

    var leftVal = ($(".trigger-default").css('left') === "140px" ? 0 : "140px");

    $(".trigger-default").animate({
      left: leftVal
    })
  })
})

span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

关于javascript - jQuery切换功能-如何运作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31299109/

10-12 12:25
查看更多