jQuery簡單調查基礎設施

Question

我目前正在構建一個包含10-11個問題的在線調查。我要尋找一個簡單的jQuery結構，我能效果基本show（）和每個了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相當陌生，我想我被困在邏輯中。請幫助我瞭解如何爲調查構建簡單的基礎架構。

謝謝！如果你想要的東西手2分鐘，我可以爲您創建一個小提琴編碼

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

：

Answer 1

您可以使用這些指導來創建一個手風琴。

---

編輯：

這裏定製的手風琴：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;} 

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/