1

現在、10 ～ 11 の質問からなるオンライン調査を作成しています。各質問をslideUp()およびslideDownできる単純なjQuery構造を探しています..私の調査は以下の基本構造を持っています

<div class="question">
  Question 1 ....
</div>

<div class="question noshow">
  Question 2 goes here .... 
</div>

次のようなjQueryコマンドを使用することを考えています：

$('document').ready(function() {
  $('.nextbutton').click(function() {
     $('.question').slideUp()
     $('.question').next().slideDown() 
  });

  $('.prevbutton').click(function() {
     $('.question').slideUp()
     $('.question').prev().slideDown()
  });
});

私はjQueryが初めてで、ロジックに行き詰まっていると思います。調査用の単純なインフラストラクチャを構築する方法についてのロジックを教えてください。

ありがとうございました！

4

2 に答える 2

2

次のいずれかのガイドを使用して、アコーディオンを作成できます。

http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

2 分でハンド コーディングしたい場合は、Fiddle を作成できます。

編集：

カスタム アコーディオン: JSFIDDLE

コード：

HTML

<div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
    <div class="question">
        <a href="">Click here</a>
        <p>Question here?</p>
    </div>
</div>​

jQuery

$('.question a').click(function(e) {
   $('.question').find('.open').slideUp().removeClass('open');
   $(this).siblings('p').slideDown().addClass('open');
    e.preventDefault();        
});​

CSS のビット:

.question {border: 1px solid #e4e4e4; padding:10px;}
.question p {display: none;}
于 2012-08-07T10:40:13.597 に答える
-1 
<div id="questions">
<div class='question'>Qqqqqqq1</div>
<div class='question'>Qqqqqqq2</div>
<div class='question'>Qqqqqqq3</div>
<div class='question'>Qqqqqqq4</div>
</div>
<button class='prevbutton' />
<button class='nextbutton' />

JS の部分:

$('document').ready(function() {
    $(".question").not(".question:first").hide();

  $('.nextbutton').click(function() {
      $('.question:visible').slideUp().next().slideDown() 
  });

  $('.prevbutton').click(function() {
      $('.question:visible').slideUp().prev().slideDown()
  });
});​

参照: http://jsfiddle.net/93S8B/

于 2012-08-07T10:41:19.757 に答える