Question

所以我必须想出一些像这样的迷你剧本，

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

够简单....

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

的CSS：

.answer { display:none }

JS / JQ：

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

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

等等，但现在如果我说，5个问题，然后生病必须再创建5个变量（或直接用jq调用em）等等...长话短说，它将是每个<的代码/ strong>问题/答案设置笨重

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

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，它同时打开所有答案。< / p>
我试过

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);
这样的东西
我知道我很亲密。任何提示/链接，解释等都很高兴欣赏。

Answer 1

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);    
});

Answer 2

在我看来，使用元素ID来解决你的Q和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>

快速jquery幻灯片，普遍事件

2 个答案: