Question

在http://www.socialstudent.co.uk/stackoverflow/我试图找到一种方法来实现这一点，当您在移动设备上点按图片时，它会让文字显示在它下方和一个按钮上。然后如果再次点击它就会消失。

我在JS中尝试过常用的方法，但似乎都没有用。关于如何实现这一点的任何想法都会很棒！

一个例子就是这个 - http://jsfiddle.net/ZECTP/，但图片会在移动设备上点按。

按要求JS关闭jsfiddle：

  $(function () {
        var div = $('#showOrHideDiv');
        $('#action').click(function () {
            div.fadeToggle(1000);
        });
    });

HTML off jsfiddle，如下所示：

<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>

它必须是图像上的文字的补充，如下面的文字和按钮需要出现。

谢谢！

Answer 1

检查此udpated fiddle

我认为这就是你要找的东西。

<强> HTML

<figure class = "figure">
    <img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
    <figcaption class = "figcaption">
        SOME TEXT HERE    
    </figcaption>
</figure>

<强> CSS

    figure {
    font-size: 100%;
}

figcaption {
    display: none;
}

<强>的jQuery

$(document).ready(function(){
$(".figure").click(function(){
    $(".figcaption").toggle();
});
});

Answer 2

我检查了您提供的网站的源代码，您需要添加此代码才能获得所需的效果。我假设你想在每张图片上显示/隐藏文字。

var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
    el = $(this);
    el.find('div').fadeToggle('fast');
})

单击滑块内的图像以显示文本

2 个答案: