jQuery与CSS切换

Question

I have replicated a toggle functionality from this site: http://www.williamsprofessionalpainting.com/FAQ.php

Here is the updated version which renders the basic toggle function with minimum CSS:

http://jsfiddle.net/NinjaSk8ter/yXNmx/

Answer 1

Your code is working fine, but jsFiddle is wrapping it in a function. In other words, it ends up looking something like:

window.onload = function() {
  function ToggleFAQ(Ans) {
    ...
  }  
};

The function is defined within the onload handler, so when your onclick tries to call it, it doesn't exist.

If you change the drop-down on the top-left of your fiddle to "no wrap", it all works fine. See this modified version.

Answer 2

On your JSFiddle - if you change the wrap method to "no wrap(head)" and it simply works.

Alternatively - you can declare the function as a global var:

ToggleFAQ = function (Ans)
{
  //..
}

what renders as

jQuery(document).ready(function(){

  //when defined like this - ToggleFAQ  will still be visible when the 
  //"ready" event finishes.
  ToggleFAQ = function (Ans)
  {
     //..
  }

}

the wrap you selected puts your code in a function passed to jQuery's "dom-ready" event - and that's a closure that once is executed - all local variables are "vaporized".