Блог

Я борюсь с jQuery на сенсорных устройствах.

У меня есть событие, которое переключает класс «hover» флип-контейнера. Это должно вызвать преобразование css для переворачивания плитки.

Он отлично работает при щелчке мышью, но не при касании. Протестировано на iPhone 6S.

Сайт:
https://ganjaseeds.cz/o-nas/

Код:

HTML

 <div class="flip-container">
<div class="flipper">
    <div class="front o-nas-4">
        <button class="o-nas-button o-nas-button-front"><img src="/wp-content/themes/favou/images/ikona_otaznik.png"></button>
        <h3>4 sliby, <br>za které <br>vám ručíme</h3>      
    </div>
    <div class="back">
        <button class="o-nas-button o-nas-button-back"><img src="/wp-content/themes/favou/images/ikona_krizek.png"></button>
        
        <ol>
            <li><b></b><span> Nebudeme nabízet žádná nestandardní a nekvalitní semínka. </span></li>
            <li><b></b><span> Vždy se snažíme o doručení zboží v co nejkratším čase. V případě komplikací vám dáme vědět. Bez okolků a na rovinu. </span></li>
            <li><b></b><span> Jakoukoliv námi způsobenou komplikaci vám vynahradíme. </span></li>
            <li><b></b><span> Nadále budeme aktivně vyhledávat a přidávat nové semenné banky a zlepšovat služby. </span></li>
        </ol>
    </div>
</div>
  

JS:

 <script>
jQuery( document ).ready(function() {
    jQuery('.flip-container .flipper .front .o-nas-button-front').on('click touch', function() {
    jQuery(this).closest('.flip-container').toggleClass('hover');
});
jQuery('.flip-container .flipper .back .o-nas-button-back').on('click touch', function() {
    jQuery(this).closest('.flip-container').toggleClass('hover');
});
});
</script>
  

CSS (относится только к преобразованиям):

 .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 500px;
    height: 300px;
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #1CB573;
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #1CB573;
    padding: 60px 60px 20px 20px;
}
  

Может кто-нибудь подсказать мне, что я делаю не так?

Спасибо за любые предложения.