Javascript 单击（）并切换（）-错误

我试图掌握click（）和toggle（）方法，但当我尝试实现它们时，似乎是在从页面上“剥离”clicked类并运行代码。由于原始类已从我的页面上剥离，因此我无法再次单击（）以切换（）

知道我做错了什么吗？我已经查找了很多次，尝试了各种示例代码，所有这些代码似乎都给了我相同的“剥离”效果，因为它似乎将我的类从页面上剥离到左侧。还有各种情况下我需要使用IDs，这就是为什么我不能使用addClass（）removeClass（）方法的原因

这是我的代码（我离开CSS是因为当有背景而不仅仅是文本时，更容易看到我所指的“剥离”效果）：

标题
身体{
背景：黑色；
颜色：白色；
}
div{
背景：蓝色；
}
.冒险{
位置：绝对位置；
顶部：22px；
左：0px；
}
.太阳能系统{
位置：绝对位置；
顶部：44px；
左：0px；
}
选择自己的冒险
太阳系
$（“.adventure”）。单击(
函数（）{
$（'.adventure'）。切换（函数（）{
$（“.solarSystem”）.css（{top:“150px”}）；
}，函数（）{
$（“.solarSystem”）.css（{top:“250px”}）；
});
});

非常感谢您提供的任何帮助，因为我花了太长时间来解决这一问题，但运气不佳（谢谢！

在

click（）

函数中放入

toggle（）

函数可能不会像您所想的那样，新版本的jQuery也会删除该版本的

toggle（）

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

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

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

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

也许可以试试这样的东西

<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>


.big top{top:250px；}
.little top{top:2150px；}
$（文档）.ready（函数（）{
$（“.adventure”）。单击(
函数（）{
$（“.solarSystem”）.toggleClass（“大顶”）；
}); 
$（“.solarSystem”）。单击(
函数（）{
$（“.adventure”）.toggleClass（“小上衣”）；
});
});
这正是我想要做的，谢谢！有没有办法将其还原为默认css值，而不是手动设置第二个值？基本上，第一次单击将应用新css，第二次单击将返回默认设置，等等。
<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>