jQuery函数适用于localhost，但不适用于Web

Question

真的在这个问题上摸不着头脑，无法在任何地方找到相关的帖子。所以我在我的网站上有一个功能，当用户点击他们的头像两个div使用jQuery tog可见性。最终结果应如下所示：

在我的本地主机上一切正常，我可以看到动画但是当我把所有内容都带到网上时，它似乎会崩溃并停止正常工作。我明白了：

我试图弄乱z-index，清除我的缓存，并使用开发工具切换可见性，但没有任何效果。

我有一个朋友去网站试试，动画效果很好，他得到了想要的动画。

您可以在此处查看该网站：http://infalliblegaming.com/

顺便说一下，当我点击头像时，动画会一直走到最后，但似乎“弹出”进入导航栏并且我在Chrome上看不到。 （如果我检查它上面的元素，虽然我可以看到代码）

用户名：aelo和密码：aeloraelor

jQuery的：

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

Answer 1

您是否尝试过同一页面上的其他动画？当动画没有任何反应时，答案是jquery没有正确加载。确保您没有链接服务器上的本地文件，但将脚本链接到

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>

对于动画，请尝试包含此

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

希望它有所帮助！

编辑：1

好的，我发现了错误的方法。如果你把width = 70％，你的 blogpostspace div太大了。在1024 x 980等分辨率的屏幕上，您会发现70％远远超过右侧固定的头像容器。这就是为什么你在右边看错了边界的原因。

解决方案是将头像元素放在右侧固定的div中，维度为％，如：

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

和style css喜欢这个：

#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之间的空格，只需使用边距以确保它有效。

像：

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

再见！

Answer 2

在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;
}

观察这两个截图，似乎第一个是从更大的屏幕拍摄的。

看看这个：Screen