Question

我试图掌握click（）和toggle（）方法，但是当我尝试实现它们时，它似乎是＆＃34;剥离＆＃34;关闭我的页面并运行代码的类。因为原始类已从我的页面中删除，所以我无法再次单击（）以切换（）它。

知道我做错了什么吗？我已经多次查看了这个并尝试了各种示例代码，而且似乎都给了我相同的＃34;剥离＆＃34;效果，因为它似乎剥离我的班级页面和左侧。还有各种情况我需要使用ID，这就是为什么我不能使用addClass（）removeClass（）方法。

这是我的代码（我离开了CSS，因为它更容易看到＆＃34;剥离＆＃34;当有背景而不仅仅是文本时我指的是这样的效果）：

<!DOCTYPE html>

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <head>
    <title>Header</title>
    <style>
    body {
      background: black;
      color: white;
      }
    div {
     background: blue; 
    }
    .adventure{
      position: absolute;
      top: 22px;
      left: 0px;
    }
    .solarSystem{
      position: absolute;
      top: 44px;
      left: 0px;
    }
    </style>
  </head>
  <body>
      <div class="adventure">Choose Own Adventure</div>
      <div class="solarSystem">Solar System</div>
  </body>
      <script>
      $(".adventure").click(
      function(){
      $('.adventure').toggle(function () {
    $(".solarSystem").css({top: "150px"});
}, function () {
    $(".solarSystem").css({top: "250px"});
});
});
      </script>
  </body>
</html>

非常感谢任何帮助，因为我花了很长时间来解决这个问题而没有运气。 :(谢谢！

Answer 1

在toggle()函数中放置click()函数可能不会按照您的想法执行，并且在较新版本的jQuery中也会删除toggle()的版本

您可以创建自己的切换功能

$(".adventure").on('click', function(){
    var flag = $(this).data('flag');

    $(".solarSystem").css({top: (flag ? "250px" : "150px")});

    $(this).data('flag', !flag);
});

FIDDLE

Answer 2

也许尝试这样的事情？

<Style>
.big-top {top:250px;}
.little-top {top:2150px;}
</style>

<script>
 <script>
$(document).ready(function(){
      $(".adventure").click(
      function(){
            $(".solarSystem").toggleClass("big-top");

       }); 
      $(".solarSystem").click(
      function(){
            $(".adventure").toggleClass("little-top");

       });
});
</script>

单击（）和切换（） - 错误

2 个答案: