css和javascript在单击时显示图像的图标

我在用css配置javascript时遇到了一些问题，因此当单击图像时，会出现一个带有图标的小标题栏。当前，当我将鼠标悬停在图像上时，会出现标题栏，但我想对此进行更改，以便平板电脑上的用户可以使用该标题栏，因为他们需要触摸并且没有悬停功能

查看页面

<figure>
    <img width="158" height="158" alt="Gravatar" 
             data-bind="attr:{src: GravatarUrl}" />
    <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" 
                   data-bind="attr:{'href':'mailto:' + Email()}"></a>
        <a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
    </figcaption>
</figure>

Javascript不确定是否有办法只用css来实现

<script type="text/javascript">
    (function ($) {
        $.views.Roster.GetRoster('@url');
        $('figure').on('click', function (event) {
            $(event.currentTarget).toggleClass('open'); 
        });
    })(jQuery);
</script>

（函数（$）{
$.views.花名册.get花名册（'@url'）；
$（'figure'）。在（'click'，函数（事件）{
$（event.currentTarget）.toggleClass（'open'）；
});
})（jQuery）；

如果此代码

figure:hover figcaption {
    margin-bottom: 0px;
}

正在显示figcaption，并且您正在将

open

类放入

图中

当您想要显示它时，您可以使用：

figure:hover figcaption, figure.open figcaption {
    margin-bottom: 0px;
}

---

切换一个类并将可见元素留给CSS是个好主意

$('figure').on('click', function (e) {
    $(this).toggleClass('open'); 
});

在这种情况下，根据您希望的外观设计您的Figcapto，然后添加：

figcaption { display: none; }
.open figcaption { display: block; }

---

这样，当figcaption在默认情况下是隐藏的，但是当您单击目标并且javascript添加了类“open”时，figcaption将可见。当然，您不必让它显示块，它可以是除“none”之外的任何东西。

在您附加的CSS代码片段中，

open

类在任何地方都没有使用。你把所有东西都贴出来了吗？@rr-你是说Javascript？我只是添加了它，但不知道如何正确连接或创建iti的进程。我做了更改，现在它的标题没有显示在悬停上，这是我想要的，但当我单击图像时，它也没有显示yetforgot在figure标记中添加open作为类。但现在它是一个静态视图，显示在页面加载上-我如何更改它以便在单击图像后显示？@Amina我不明白你的意思。

open

类应该只与javascript和

click

事件一起放置，为什么你说你忘记将open作为类添加到figure标记中？那么我的图像在我的

figcaption

标记中-当我单击它时，我希望显示

figcaption

标记。@Amina但是你现在有什么问题吗？现在应该可以用了，是吗？您是否更改了当前布局的任何其他内容？不幸的是，它仍然不起作用-不确定是什么原因导致它不起作用我将我的javascript放在另一个文件中，因此我正在使用

event

您能提供一个链接以了解更多上下文吗？你能看到这个类在浏览器控制台中点击切换吗？是否还有其他javascript调用在工作？您是否看到任何错误？这应该可以正常工作。当我将您的所有内容复制到JSFIDLE时，该操作会起作用。（）所以这可能是javascript执行时的问题。我将用于切换的javascript片段放在同一个javascript文件中，该文件用于在页面上显示我的用户（获取信息），因此该文件正在被调用并工作。在控制台中，我看到

$（'figure'）…

，它没有显示任何错误。

figcaption { display: none; }
.open figcaption { display: block; }