javascript - Click() 和 Toggle() - 错误

标签 javascript jquery html css

我试图掌握 click() 和 toggle() 方法,但是当我尝试实现它们时,它似乎是从我的页面“剥离”已单击的类并运行代码。因为原始类已从我的页面上剥离,所以我无法再次单击 () 来切换 () 它。

知道我做错了什么吗?我查了很多次并尝试了各种示例代码,所有这些代码似乎都给我同样的“剥离”效果,因为它似乎将我的类从页面上剥离到左侧。还有各种情况我需要使用 ID,这就是我不能使用 addClass() removeClass() 方法的原因。

这是我的代码(我留下了 CSS,因为当有背景而不仅仅是文本时更容易看到我所指的“剥离”效果):

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

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

最佳答案

toggle() 函数放在 click() 函数中可能不会按照您的想法执行,而那个版本的 toggle() 也在较新版本的 jQuery 中被删除

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

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

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

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

FIDDLE

关于javascript - Click() 和 Toggle() - 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22362891/

相关文章:

c# - MailMessage c# - 如何使其成为 HTML 并添加图像等?

ASP.NET Presist 在回发期间对 div 进行更改?

html - 伪类元素 z-index 问题

javascript - 格式化从电子表格中读取的数字

javascript - 使用reduce和map获取数组中对象的频率

javascript - 随机化 CSS 规则

javascript - 类型错误 : Cannot read property 'id' of undefined

javascript - 在 angular2/typescript 中提交之前限制双向绑定(bind)

JavaScript 从函数返回 promise

javascript - 如何使用jspdf获取整个div并导出为pdf?