Javascript 多个隐藏全屏div？

我正在开发我的公文包网站，但无法解决以下问题

网站基本上只是图片，如果你点击一个， 打开一个半透明的全屏div，其中包含信息（更多图片和一些文本）。 如果再次单击，div将关闭

用于隐藏和显示的jQuery：

<script>
$(function()
{
    $('.masonryImage').click(function()
    {
        $('.hiddenDiv').show();
        $("body").css("overflow", "hidden");
    });
    $('.hiddenDiv').click(function()
    {
        $('.hiddenDiv').hide();
        $("body").css("overflow", "auto");
    });
});
</script

---

以下是我如何修改您的代码：

HTML

<div class="masonryImage">
    <img src="..." alt="">
        
        <div class="hiddenDiv">
            <div class="text">
                <p>Lorem ipsum...</p>
            </div>
            <div class="pics">
                <img src="..." alt="">
            </div>
        </div>
</div>

您只需使用

.toogle（）

来显示/隐藏div。

$（此）

引用单击的

masonryImage

，并将

.find（'.hiddenDiv'）

引用到其子级（您也可以使用

.children（'.hiddenDiv'）

）。 然后，您可以使用

.is（“：visible”）

测试单击的div是否隐藏或可见，以应用您的主体自定义css:）

---

希望我能帮助您。

您能在JSFIDLE中复制您的问题吗？请参阅和以获取演示，还是我的Java没有正确地删除divJava不是Javascriptok此代码可能与其他div冲突。当您使用类时，如果所有隐藏的div都有相同的类，那么它们都会同时显示，当您关闭一个div时，它会关闭所有div。现在，您需要做的是更正类似以下内容：

$（'.masonryImage'）。单击（function（）{$（this）.next（）.show（）；//它将仅显示该图像旁边的hiddenDiv}）

，当您右键关闭div时，

$（this）.hide（）。我希望你能理解。谢谢你，伙计，简单又好用。
.hiddenDiv {
    position:fixed;
    top:0;
    left:0;
    background:rgba(255,255,255,0.8);
    z-index:900;
    width:100%;
    height:100%;
    display:none;
    overflow: scroll;
 }

.masonryImage {

     margin: 20px 20px 20px;
     display: inline-block;
     cursor: pointer;
    }

<div class="masonryImage">
    <img src="..." alt="">
        
        <div class="hiddenDiv">
            <div class="text">
                <p>Lorem ipsum...</p>
            </div>
            <div class="pics">
                <img src="..." alt="">
            </div>
        </div>
</div>

$('.masonryImage').click(function()
{
    if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
        //alert('hiddenDiv is visible !');
        $("body").css("overflow", "hidden");
    }
    else {
        //alert('hiddenDiv is hidden !');
        $("body").css("overflow", "auto");
    }
});