Javascript jQuery函数可以在本地主机上工作，但不能在web上工作

这篇文章让我摸不着头脑，在任何地方都找不到相关的帖子。所以我在我的网站上有一个功能，当用户点击他们的头像时，使用jQuery两个div切换可见性。最终结果应如下所示：

在我的本地主机上，一切正常，我可以看到动画，但当我把所有东西都放到网络上时，它似乎就坏了，无法正常工作。我明白了：

我试图用开发工具处理z索引，清除缓存，切换可见性，但都没用

我有一个朋友去了这个网站，尝试了一下，动画对他来说很好，他得到了想要的动画

您可以在此处查看网站：

顺便说一句，当我点击头像时，动画一直到最后，但随后似乎“弹出”到导航栏，我在chrome上看不到。（如果我检查了上面的元素，尽管我可以看到代码）

用户名：aelo，密码：AELORELOR

jQuery：

$("#avatar").click(function(){
     $("#avatarstats").stop().animate({
          width:'toggle',
          visibility:'toggle'
     });
     $("#avatardropdown").stop().animate({
          width:'toggle',
          visibility:'toggle'
     });
});

---

在main.css中，尝试将blogspot类更改为position:block，或者删除position属性

main.css，第159行

.blogpost {
    position: relative; (remove)
    background:white;
    border:1px solid #333;
    margin-top:5px;
    margin-bottom:5px;
    box-shadow:1px 1px 5px #333;
    max-height:500px;
    overflow:hidden;
}

观察这两张截图，第一张截图似乎是从更大的屏幕上截取的

---

看这个：

你在同一页上尝试过其他动画吗？当动画没有发生任何变化时，答案是jquery没有正确加载。确保您没有链接服务器上的本地文件，而是将脚本链接到

对于动画，请尝试甚至包括这个

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

这是我的想法，通过放置虚拟容器来响应浏览器宽度

一个建议是，不要使用标签来定义div之间的空格，只使用边距来确保它永远有效

比如：

bla bla bla。。。。。
呜呜呜呜。。。。。
呜呜呜呜。。。。。
css:
.保证金部{
边缘底部：30px；
}

---

再见

要单击的按钮在哪里？单击默认的化身（登录后的蓝色脸）。jQuery是客户端。因此，它是在本地主机上还是在公共域上都无关紧要。一定还有别的事。有控制台错误吗？你能给我一个测试帐户吗？我可以看到动画对我来说很好。。对于其他人，你可以以用户名：aelo和密码：AELORELOR登录。移动position元素可以看到avatardropdown，但它会弄乱其他动画，但我给了你答案。如果你的#avatarstats和#avatardropdown已修复，你可以尝试将这两个div移动到文档末尾并调整css。但我认为您的问题与客户机/服务器无关，而是与屏幕大小有关。试试这个：例如，将blogpost宽度更改为700px。

<div id="container-avatar">
  <img id="avatar" src=.../>
  <div id="avatarstats">...</div>
  <div id="avatardropdown">...</div>
</div>

#container-avatar{
  position:fixed;
  width:20%;/* or whatever you want */
  right:20%;/* or whatever you want */
  top:50px; /* or whatever you want */

}

#avatarstats{
  position:relative;
width:70%;
float:left;
}

#avatardropdown{
  position:relative;
  width:30%;
  float:left;
}

<div class="margin-div"> bla bla bla .....</div>
<div class="margin-div"> bla bla bla .....</div>
<div class="margin-div"> bla bla bla .....</div>


css:

.margin-div{
margin-bottom:30px;
}