javascript - 单击功能可显示悬停覆盖图-单击时显示，但第二次单击时不会消失

我有图片的图片网格，当用户将鼠标悬停或点击在手机上时，会出现带有一些文本和按钮的透明叠加层

我正在使用点击功能

它可以在我的触摸屏笔记本电脑上正常运行，但不能在我的iOS手机或平板电脑上运行

叠加层在第一次点击时出现，但是当我再次点击时它不会消失，除非我点击另一个网格图像。

我希望它在第二次点击时消失

我已经尝试了各种方法来完成这项工作，并且在点击另一个网格图像时，我最接近地使它消失了。

这是我的代码：
的HTML

    <div class="col-xs-12 col-sm-7"><div class="image-wrap">
<div onclick="on()">
<img src="assets/images/pic.jpg">
<div class="overlay blue">
        <h3>Portfolio item 1</h3>
        <hr>
          <p><strong>Coming Soon</strong><br> some overlay text here</p>
          <br>
          <a href="contact-us" class="btn btn-white btn-lg">View Website</a>
        </div>

</div>
</div>
</div>

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}

的CSS

.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
 }

}

.image-wrap:hover .overlay {
opacity: 1;
}

.red {
background: rgba(102,67,154,0.7);
}

.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}

.purple2 {
background: rgba(71,13,142,0.7);
}
}

最初，我仅使用CSS进行了尝试，这给了我除iOS以外的所有设备所需的结果！

因此，我决定使用点击功能来确保它在所有设备上都能正常工作。我在我编写的可与CSS结合使用的现有代码中添加了on click函数，但是由于我是JS的新手，所以我想知道是否将其放在错误的位置（单击时）？我尝试了很多变化，但这是我能使它工作的最好方法

关于如何使覆盖层在第二次点击时消失的任何建议都很棒！

js小提琴
https://jsfiddle.net/49h450g9/14/

请注意：这在触摸屏笔记本电脑上工作正常，但不适用于手机！

谢谢！

最佳答案

您在jsfiddle示例上打开和关闭的功能根本不起作用。发生的情况是您在正常屏幕上的悬停效果，这就像移动工作的行为一样，例如关注移动设备。

而且，根据您的描述，我相信您的项目中有多个投资组合。因此，您有多个具有ID覆盖层的元素，并且多次使用相同的ID无法通过html验证，并且还会导致JavaScript错误。

为了使您的项目正常工作，请遵循以下列表：

确保在项目中添加了jQuery（通常在</body>之前）
现在让我们考虑下面的这些投资组合项目

<div class="portfolio">
    <img src="images/portfolio-1.jpg" alt="...">
    <div class="overlay">Link</div>
</div>
<div class="portfolio">
    <img src="images/portfolio-2.jpg" alt="...">
    <div class="overlay">Link</div>
</div>
<div class="portfolio">
    <img src="images/portfolio-3.jpg" alt="...">
    <div class="overlay">Link</div>
</div>

然后像这样在媒体查询中提供正常的悬浮css样式。因此它永远不会影响您的js样式（我决定将小于992px的媒体用作移动设备）：

.portfolio{
    background-color: #f1f1f1;
    position: relative;
}
.portfolio .overlay{
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}
@media all and (min-width:992px){
    .portfolio:hover .overlay{
        opacity: 1;
    }
}

现在，使用jQuery时，您可以在用户单击任何.portfolio项目并在其上切换一个类的同时使用event，通过该类我们将向其添加更多的CSS：

$(document).ready(function(){
    'use strict';

    $(.portfolio).on('click', function(){
        $(this).siblings('.portfolio').removeClass('hovered');
        $(this).toggleClass('hovered');
    });
});

现在，它将在第一次单击时添加hovered类，并在第二次单击时删除hovered类。同样，它将从其他投资组合项目中删除.hovered。现在，向其中添加与悬停效果相同的css：

.portfolio.hovered .overlay{
    opacity: 1;
}

关于javascript - 单击功能可显示悬停覆盖图-单击时显示，但第二次单击时不会消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49637364/