1

所以我必须想出一些类似这样的迷你脚本，

单击一个句子或一个问题，答案就会下降（向下滑动）。再次单击它，它会向上滑动等。

够简单的......

现在我是一个菜鸟，例如，如果我有 1 个问题，那么我当然会写这样的东西：

CSS：

.answer { display:none }

js/jq:

var question = $('.question');
var answer = $('.answer');

question.click( function(){
    answer.slideToggle(500);    
});

等等，但是现在如果我说 5 个问题，那么我必须再创建 5 个变量（或直接用 jq 调用 em）等等等等……长话短说，它将成为每个问题/答案集的代码笨重的快速

我试图写一些更聪明的东西（更少的代码）所以为了测试我的逻辑我试试这个：

question.click( function(){
    if($(this).parent().hasClass('open')){
        $(this).parent().removeClass('open');
        alert("its open");  
    } else {
        alert("its not open");
        $(this).parent().addClass('open');

    }
});

现在当我尝试这个时，它可以工作。当它打开时，它会提醒打开并删除打开的类，因此在下次单击时，它没有打开并提醒我......如此小的测试工作。

所以很自然，这意味着我应该能够添加某种动画/幻灯片代码来让我滚动并且它应该可以工作，但要么 A，它不起作用，要么 B，它同时打开所有答案。

我试过了

question.click( function(){
    if($(this).parent().hasClass('open')){
        $(this).parent().removeClass('open');
        //alert("its open");
        answer.slideUp(500);    
    } else {
        //alert("its not open");
        $(this).parent().addClass('open');

        answer.slideDown(500);
    }
});

无论我点击什么问题，这个都会同时打开所有答案。

我想，让我在答案行中添加一个“this”来本地化事件......也许是这样的。

$(this).answer.slideDown(500);

但这显然是行不通的。

我也尝试过类似的东西$(this).find('answer').slideUp(500);

我知道我很接近哈哈。任何提示/链接、解释等都将不胜感激。

4

2 回答 2

2

http://jsfiddle.net/7eHzz/

<div class="question">
   q1
    <div class="answer">
      a1
    </div>
</div>



var question = $('.question');
var answer = $('.answer');

question.click( function(){
    $(".answer",$(this)).slideToggle(500);    
});
于 2012-05-21T02:57:33.760 回答
0

在我看来，使用元素 id 来解决您的 Qs 和 As 将使生活更轻松：

http://jsfiddle.net/qaMwJ/3/

    <style type="text/css">
      .answer { display: none }
    </style>

    // local copy
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready( function () {
        $(".question").click(function (event) {
          // discard the "q" from id of question clicked
          var qnumber = event.target.id.slice(1);
          $("#a" + qnumber).slideToggle(500);
        });
      });
    </script>

  <body>
    <div id="q1" class="question">Q. 1</div>
    <div id="a1" class="answer">A. 1</div>
    <br><br>
    <div id="q2" class="question">Q. 2</div>
    <div id="a2" class="answer">A. 2</div>
    <br><br>
    <div id="q3" class="question">Q. 3</div>
    <div id="a3" class="answer">A. 3</div>
    <br><br>
    <div id="q40" class="question">Q. 40</div>
    <div id="a40" class="answer">A. 40</div>
  </body>
于 2012-05-21T02:31:18.607 回答