我怎样才能让jquery切换 - 点击flashcard div打开和关闭?

时间:2010-02-01 04:23:36

标签: jquery hidden mouseclick-event

我需要更改以下代码才能让用户点击闪卡标题以打开和关闭闪卡答案?

  • 我无法使用toggle()与fadein / fadeout一起工作
  • 以下版本不响应点击

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript"
        src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.4.1");
            google.setOnLoadCallback(function() {      
              $("div > div.question").click(function() {
                if($(this).next().is(":hidden") {
                   $(this).next().fadeIn("slow");
                } else {
                   $(this).next().fadeOut("slow");
                }
              });                              
            }); 
        </script>
        <style>
            div.flashcard {
              margin: 0 10px 10px 0;
            }
            div.flashcard div.question {
              background-color:#ddd; 
              width: 400px;         
              padding: 5px;    
              cursor: hand;   
              cursor: pointer;
            }
            div.flashcard div.answer {
              background-color:#eee; 
              width: 400px;
              padding: 5px;    
              display: none;      
            }
        </style>
    </head>

<body>
  <div id="1" class="flashcard">
    <div class="question">Who was Wagner?</div>
    <div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
  </div>

  <div id="2" class="flashcard">
    <div class="question">Who was Thalberg?</div>
    <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
  </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

试试这个:

$("div > div.question").click(function() {
    $(this).next().animate({opacity: 'toggle'}, [speed], [easing], [callback]);
}