Question

我必须使用jQuery在HTML5中创建一个页面，其中所有问题都将以表格的形式存在。点击一个特定的问题 - 它的答案应该是滑动的;在关闭该答案时，滑块应该返回并且问题应该出现。

这怎么可能？我应该使用<div>作为值还是从XML获取值？请引导您的建议和教程。

Answer 1

以下是有关如何操作的原始示例：

您需要这种HTML结构：

<div class="slider_container"> <!-- overflow:hidden; -->
<div class="slider">  <!-- position:absolute;width:loooot; -->

  <div class="box">
      <h2>Questions</h2>
      <ul class="goto">
        <li>Question 1</li>
        <li>Question 2</li>
        <li>Question 3</li>
        <li>Question 4</li>
      </ul>
  </div>
  <div class="box"><h2>ANSWER 1<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 2<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 3<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 4<span class="back">&lt; back</span></h2>box text...</div>

</div>
</div>

这个基本的jQuery：

var galW = 600; // set here the 'slider container' width

$('ul.goto li').on('click',function(e){
  e.preventDefault();
  var thisIndex = $(this).index()+1;  
  $('.slider').stop(1).animate({left: -(galW*thisIndex)}, 1000);  
});

$('span.back').on('click',function(){
  $('.slider').stop(1).animate({left: 0}, 1000); 
});

我们在这里做的是：获取点击的li元素+1的索引 N 。
+1因为我们已经在查看第一个框（带有问题），但所有其他.box元素将高出+1个索引。

在我们有了这个数字后，我们只需在＃34;速度＆＃34; （时间）1000做一些简单的数学运算：我们将得到的索引 N 乘以＆＃39;视口＆＃39;宽度。

要返回，我们只需将.slider动画回left:0px（或只是＆＃39; 0＆＃39;）位置。

如果您不了解我使用的某些方法，可以在此处找到它们：http://api.jquery.com/

（请下次展示一些问题，以便我们查看你的一些代码。谢谢！快乐编码）

html5 / jQuery Slider - 滑动到相关答案（带滑动按钮）

1 个答案: