Question

所以我正在建立一个网站，其中我有一篇包含多个部分的大型文章但是已经破解了4个类 Title，Book1，Book2，＆amp; Book3 ，我希望能够滑动并转动display:none除了一个之外的所有内容，然后再刷一遍。我正在尝试使用Hammer.js atm但它似乎没有用。它将从标题类开始，然后滑动以显示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;}

Answer 1

您可以使用数据属性来简化此操作吗？

<section class='book2' data-leftitem="book1" data-rightitem="book3">
</section>

然后在js中，如果它是一个swipeleft，则将发送者设置为display：none并将data-leftitem设置为display：block。与使用data-rightitem的swiperight一样

如何隐藏所有类，但只有一个触摸滑动

1 个答案: