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).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 を使用して 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>
于 2012-05-21T02:31:18.607 に答える