jQuery简单的调查基础结构

Question

我目前正在构建一个由10-11个问题组成的在线调查。我正在寻找一个简单的jQuery结构，我可以slideUp()和slideDown每个问题。我的调查的基本结构如下

<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是个新手，我想我被困在逻辑上了。请帮助我了解如何为调查构建一个简单的基础设施。

谢谢!

Answer 1

您可以使用以下指南之一来创建手风琴：

如果你想在2分钟内手工编码的东西，我可以为你创建一个小提琴。

编辑：

这里有一个自定义的折叠键：

代码：

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

Answer 2

<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/