1

我目前正在构建一个包含 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 很陌生，我认为我被困在逻辑上。请帮助我了解有关如何为调查构建简单基础架构的逻辑。

谢谢！

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 回答