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

您可以使用其中一个指南创建手风琴：

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

如果您想在2分钟内手动编码，我可以为您创建一个小提琴。

编辑：

这是一个自定义的手风琴： 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/

jQuery简单的调查基础架构

2 个答案: