Question

我为noob问题道歉，但我真的找不到解决方案。

我有一个链接，当点击切换时是一个ul。

$("#pastShows").click(function () { $(".shows").toggle("slow"); });

<h3 id="pastShows"><a href="javascript:void(0)">Past</a></h3>
<div class="shows">
  <ul>
    <li>Show 1</li>
    <li>Show 2</li>
    <li>Show 3</li>
    <li>Show 4</li>
  </ul>
</div>

这个小提琴手完美无缺。 http://jsfiddle.net/Chadimoglou/NG8Dj/2/

但在http://www.kiirstinmarilyn.com/#shows

实施时，我无法让它发挥作用

谢谢你的帮助。

Answer 1

尝试删除window.onload并将初始化代码放入document.ready。

替换它：

/*----Toggle past shows----*/
window.onload=function(){
    $("#pastShows").click(function () {
        $(".shows").toggle("slow");
        alert("It Worked");
    });
}

有了这个：

$(function()
{
    $("#pastShows").click(function () {
      $(".shows").toggle("slow");
      alert("It Worked");
    });
}

Answer 2

好的，这里的问题是您使用window.onload代替document.ready()或$(function() {}。一旦DOM准备好就会调用jQuery的document.ready()方法（意味着浏览器已经解析了HTML并构建了DOM树）。如果您的网页有大图像，它将不会等待完全加载图像。因此它可能在window.onload方法之前调用。我们可以在网页上有多个document.ready()方法，这些方法将在即将推出的序列中调用。另一方面，当图像和页面的所有相关资源已完全加载时，将调用window.onload方法。假设您的网页包含大尺寸图像，直到所有图像未在页面上完全加载，window.onload方法将不会被调用。

所以，只需替换代码：

window.onload=function(){
    $("#pastShows").click(function () {
        $(".shows").toggle("slow");
    });
}

使用：

$(function()
{
    $("#pastShows").click(function () {
      $(".shows").toggle("slow");
    });
}

希望这有帮助！

jQuery Toggle在测试中工作，但没有在实现上工作

2 个答案: