因此，我正在构建一个网站，其中有一篇包含多个部分的大型文章，但中断了 4 个类Title、Book1、Book2 和 Book3，我希望能够滑动并转动display:none除一个以外的所有内容，然后滑动并再次执行此操作. 我正在尝试使用 Hammer.js atm，但它似乎不起作用。它将从Title类开始，然后滑动以显示 book1 并保持其他隐藏（我需要找出如何让它再次跳到顶部，但我很确定这可能是一个更容易解决的问题）。
HTML
<article>
<section class='title'>
</section>
<section class='book1'>
</section>
<section class='book1'>
</section>
.
.
.
<section class='book2'>
</section>
<section class='book2'>
</section>
.
.
.
<section class='book3'>
</section>
<section class='book3'>
</section>
</article>
JS
$(document).ready(function() {
$(".title").hammer().on(swipeleft, function(event){
$('.book1').css("display", "block");
$('.title').css("display", "none");
});
$(".book1").hammer().on(swipeleft, function(event){
$('.book2').css("display", "block");
$('.book1').css("display", "none");
});
$(".book2").hammer().on(swiperight, function(event){
$('.book1').css("display", "block");
$('.book2').css("display", "none");
});
$(".book2").hammer().on(swipeleft, function(event){
$('.book3').css("display", "block");
$('.book2').css("display", "none");
});
$(".book3").hammer().on(swiperight, function(event){
$('.book2').css("display", "block");
$('.book3').css("display", "none");
});
});
CSS
.book1, .book2, .book3 {display:none;}