jQuery切换在测试工作，但不在实施工作

我很抱歉noob问题，但我真的找不到解决方案。jQuery切换在测试工作，但不在实施工作

我有一个链接，当点击切换的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

实现时，衷心感谢你的帮助它工作。

来源

2012-11-20 Chadimoglou

您的控制台中可能会出现几个可能导致问题的问题（请查看Firebug或Chrome开发人员工具）。无论哪种方式，我不知道需要点击什么来触发切换以及应该显示/隐藏的内容。 – zbrunson

@zshooter感谢您指出控制台。我从来没有真正看过它。有趣的是，FB广告服务器是如何拉动的。 – Chadimoglou

好吧，这里的问题是，你正在使用window.onload，到位document.ready()或$(function() {}的。 jQuery的document.ready()方法一旦DOM准备好就会被调用（意味着浏览器已经解析了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"); 
    }); 
}

希望这有助于！

来源

2012-11-20 20:34:23

感谢澄清@Palash Mondal！ – Chadimoglou

不客气。 –

尝试摆脱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-20 20:22:04 Mun

非常感谢！这工作完美。前者没有任何理由不工作？ – Chadimoglou

jQuery切换在测试工作，但不在实施工作

回答

相关问题