转换悬停逻辑以点击移动设备

Question

我有多个div元素可以按照我的要求悬停，但由于悬停不适用于移动设备，我想通过点击jQuery启用它。我上传了我想要的图像。

$(document).ready(function() {
    $(".main").hover(function() {
        $(".blue", this).stop().animate({
            bottom: '0px',
            opacity: '0.5',
        }, 500);
    }, function() {
        $(".blue", this).stop().animate({
            bottom: '-100px',
            opacity: '0.9',
        }, 500);
    });
});

<div class="main" style="background: #cecece; height: 200px; width: 300px; position: relative; overflow: hidden; display: inline-block;">
    <div class="blue" style="font-size: 14px; background: #09bbfd; z-index: 100; height: 150px; width: 300px; bottom: -100px; position: absolute; opacity: 0.9;">
        <h2 style="margin: 12 5 5 5; color: #fcde11;">Lorem ipsum test</h2>
        <p style="margin: 12 5 5 5;">
            Suspendisse potenti. Nam tincidunt congue dignissim. Donec pharetra tincidunt aliquet. Morbi euismod non mi a pulvinar. Mauris leo tellus, tempor laoreet 
        </p>
    </div>
    <img  src="uploads/gad1.jpg" alt="windows" >
</div>

Answer 1

您只需移动逻辑以隐藏点击处理程序中的其他blue元素

$(document).ready(function() {
    $(".main").click(function() {
        //Hide other
        $(".blue").stop().animate({
            bottom: '-100px',
            opacity: '0.9',
        }, 500);

        //Animate current child element
        $(".blue", this).stop().animate({
            bottom: '0px',
            opacity: '0.5',
        }, 500);
    });
});

DEMO