Jquery 滚动到正文上的下一个div单击

我有许多div，都与类“.slide”一起使用，还有一个scroll to函数，当单击.slide div时，该函数会在其中滚动

请看这里：

然而，当我点击身体而不是幻灯片时，我试图让这个功能发挥作用。另外，因为幻灯片显示为内联块，所以我需要在下一张幻灯片已完全在视口中时将其滚动到幻灯片

---

有人对此有何指导吗？

在我的示例中，您必须在某处保留一个跟踪器-我使用body来保留一个data-*属性，该属性存储当前视图中的当前jQuery对象

var currentSlide = $('body').data( 'current-slide', $('div.slide').eq(1) );

然后将$.click处理程序从$'div.slide'切换到$'body'：

---

代码笔演示：

谢谢！这使得主体单击工作正常，但当视口中的多个幻灯片排成一行时，似乎仍然存在一些问题。例如，当我有一行三张幻灯片时，在进入下一行之前，必须单击主体三次。我想知道在这些情况下，是否有办法让它只需单击一下就跳到下面的行。当然是这样！Exchange$。单击处理程序进入容器而不是幻灯片本身：啊，对不起，我的意思是不限制容器中的宽度。我正试图保持尽可能多的幻灯片在一行的浏览器宽度将允许。

$('body').click(function(e){
   e.preventDefault();
   //get the current slide index from the body tag.
   $this = currentSlide.data( 'current-slide' );
   $next = $this.next('div.slide');

   if($next.length) {
        $next.scrollTo($next.attr('id'));
        //Save the next slide as the current.
        $('body').data( 'current-slide', $next );
   } else {
        //Throw us back to the top.
        $('div.slide:first').scrollTo($('div.slide:first').attr('id'));
        //Save the first slide as the first slide, which 
        //Cycles us back to the top.
        $('body').data( 'current-slide', $('div.slide:first'));
   }

   $(".slide a").click(function(e) {
       e.stopPropagation();
   });
});