点击移动设备

Question

我正在建立一个带引用的网站。每个引用都是一个元素，hovered应该在其上显示包含文本的内容元素。我的click（）函数和移动设备有问题。更具体地说，切换。

所以这就是布局：

当悬停或点击（移动）到元素时，它应该按照以下步骤操作：

这是HTML结构：

       <div class="work" style="background-image: url(<?=wp_get_attachment_url( get_post_thumbnail_id($tyo->ID) )?>)">
            <div class="work-description">
                <div class="content">
                    <h3 class="work-title"><?=$tyo->post_title?></h3>
                    <p class="work-content"><?=$tyo->post_content?></p>
                </div>
            </div>
        </div>

CSS（简称）：

.work-description {
    opacity: 0;
}

.work:hover .work-description {
    opacity: 1.0;
}

这很好用。徘徊。在移动设备没有悬停的情况下，我也提出了一些jQuery，因此当点击父级时，它应该将一个可见的类切换到子级。问题是，这表现得非常奇怪。

JS：

 $('.work').click(function() {
    $(this).children('.work-description').toggleClass('visible');
});

单击桌面上的元素时，它可以正常工作。该类在右侧元素上切换，然后打开和关闭。但是，当在iPad，Galaxy Tab，Android手机等移动设备上执行此操作时，第一次点击有效，但第二次（切换关闭）不会。当点击另一个元素时，它会关闭第一个元素，然后在第二个元素上切换。移动设备是否有不同的处理方式？