Question

我正在我的投资组合网站上工作，但无法解决以下问题。

网站基本上只是图片，如果你点击一个，一个半透明的全屏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="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
     <div class="text">
         <p>Lorem ipsum...</p>
     </div>
     <div class="pics">
         <img src="images/pic2.jpg" alt="">
      </div>
</div>

到目前为止它适用于一张照片，但是当我添加另一张照片时，新的隐藏文字将覆盖第一个，与图片相同。

是因为我使用的是同一个类（“masonryImage”）吗？或者不是我的Javascript正确删除div？

非常感谢。

编辑：CSS可能很有用：

.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;
    }

Answer 1

以下是我修改代码的方法：

DEMO

<强> 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>

我将hiddenDiv放在masonryImage内，以便每个masonryImage都有自定义hiddenDiv来显示/隐藏。

<强> JQUERY

$('.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");
    }
});

您可以使用.toogle()来显示/隐藏div。 $(this)是指点击的masonryImage和.find('.hiddenDiv')到其子级（您也可以使用.children('.hiddenDiv')）。然后，您可以使用.is(":visible")测试所点击的div是隐藏还是可见，以应用您的身体自定义css：）

希望我帮助过你。

多个隐藏的全屏div？

1 个答案: