jquery - 使用溢出 :hidden 水平滑动 div

Question

这不会比我想象的更难，但我已经走到了死胡同，需要回到正轨。编码新手，并且知道这并不难弄清楚，但根据我目前的编码知识，我只是在反复试验和绕圈子。所以我听说这是我最后的手段，我不想影响我在这里的评分并被禁止，所以我会尽我所能解释这一点......

简单地说:(网站链接:http://missionaryenterprises.com/home.html)本页的内容部分由 9 个方框组成，呈无序排列。我需要为内容添加更多框，但在不影响网站大小和外观的情况下，我想在两侧添加两个按钮，当单击时，将滑入并显示另外 9 个内容框。我知道我需要创建一个非常宽的 div 来容纳另一组 9 个内容框，或者我想要的那么多。该 div 需要具有属性 overflow:hidden，这就是我所知道的，我将进行更多尝试，但任何帮助将不胜感激 :) Shalom :)

Answer 1

您可以使用 jquery 的显示和隐藏功能，如 api.jquery.com 所示

你的html

<button id="showr">Show</button>
<button id="hidr">Hide</button>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>

和你的脚本:

$( "#showr" ).click(function() {
 $( "li" ).first().show( "fast", function showNext() {
   $( this ).next( "li" ).show( "fast", showNext );
  });
});

$( "#hidr" ).click(function() {
 $( "div" ).hide( 1000 );
});