toggling with jquery, working on jsfiddle but not

问题:

why is my toggle function working on this jsfiddle but not my site?

Here is the JS Fiddle: http://jsfiddle.net/timur/bMfdD/4/ Here is the website: http://www.blindsdetroit.com/testing

<a id="clickMe" href="#">Type of Worker</a>

<div id="clickEvent" class="hide">
<ul>
<li>Rivermen</li>
<li>Boatmen</li>
<li>stuff</li>
</ul>    
</div>

Here is the jquery

$('#clickMe').click(function() {
$("#clickEvent").fadeToggle("slow");
});

here is the css

.hide  { display:none; }

回答1:

Wrap your code in .ready() so that it will run once the DOM is loaded

$(document).ready(function(){
  $('#clickMe').click(function() {
     $("#clickEvent").fadeToggle("slow");
  });
});

or put your JS file before body ends

回答2:

Put your code inside document ready handler

$(function(){
  $('#clickMe').click(function() {
    $("#clickEvent").fadeToggle("slow");
  });
});

You don't have to write ready handler in your fiddle as your code is automatically wrapped with document.ready (their is an option to choose from)

<--- your code is executed when document is ready