（jQuery）在手机上调用函数，但jQuery动画不起作用

Question

我有一个带有可点击选项的表。 单击该选项后，将运行某些功能，并且页面的显示也会更改。 该按钮是这样的：

<table id="topBar">
  ...
  <td id="menuHeader" (click)=callMenu()>
    <img id="menus" style="height: 25px" src="../../assets/Menu.svg">
    <h2 style="margin-top: 10px;" id="foo"> Foo </h2>
  </td>
</table>

这里重要的是callMenu（）函数：

callMenu() {
  alert('foo');
  if ($("#sidebar").position().left == -200) {
    $('#sidebar').animate({ left: "0px" }, 200);
    $("#darken").show();
  } else {
    $('#sidebar').animate({ left: "-200px" }, 200);
    $("#darken").hide();
  }
}

此功能在PC上运行良好，问题发生在移动浏览器上。 警报foo起作用了，这告诉我该函数正在被调用。 但是，jQuery不会对页面起作用，因此不会调用边栏。


我读了另一个问题，这可能是由控制台上的错误引起的，移动浏览器无法恢复，但是我的控制台没有错误，只有以下警告：

看来您正在使用带有反应形式指令的Disabled属性。 如果在组件类中设置此控件时将Disabled设置为true，则实际上将在DOM中为您设置disabled属性。 我们建议使用这种方法来避免“检查后更改”错误。

  Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); 

但是即使删除了这种有问题的表格，问题仍然存在。

我在这里做错了什么？ 还是jQuery在移动设备上不支持此功能？

Answer 1

在我看来，在移动设备上计算位置是错误的。 检查if语句返回true if ($("#sidebar").position().left == -200) 如果不是这样，则在移动设备上的计算是错误的，您应该重新考虑隐藏边栏时如何检查。