0

我为这个菜鸟问题道歉，但我真的找不到解决方案。

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

$("#pastShows").click(function () { $(".shows").toggle("slow"); });​</p> 

<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

感谢您的帮助。

4

2 回答 2

3

尝试摆脱 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");
    });
}
于 2012-11-20T20:22:04.093 回答
1

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

所以，只需替换代码：

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

和：

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

希望这可以帮助！

于 2012-11-20T20:34:23.487 回答