我想通过在div函数外面点击来隐藏隐藏的溢出

时间:2015-06-30 23:43:45

标签: jquery

每当我向事件目标添加可见溢出时,隐藏和可见的溢出将无法在其他叠加层上起作用。有两个叠加弹出窗口,代码工作正常,直到我向事件目标添加任何溢出信息。我想在单击叠加弹出窗口时隐藏身体上的溢出,并在单击叠加层外部或关闭按钮时重新显示。此外,我所有的div都处于相对位置。

JQUERY

$(document).ready(function()
{

    $MainHeadline = $("#MainHeadline, #mainHeadlineLink");
    $MainHeadlineClose = $(".closeMain");
    $SideHeadline = $("#SideHeadlineOne, #SideOneLink");
    $SideHeadlineClose = $(".closeSideMain");

    $MainHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden');
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $MainHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $SideHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $SideHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length)
        {
            $(".MainHeadlineOverlay").hide();
        }
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length)
        {
            $(".RightHeadlineOverlayOne").hide();
        }
    });

});

HTML

<body>
<div class="Headlines">
<div class="mainheadline">
    <div class="headline">
        <a href="" id="MainHeadline"><img src="picture.jpg" width="100%" height="100%"></a>
        <div class="HeadlineTitle">
            <h1><a href="" id="mainHeadlineLink">Title</a></h1>
            <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
        </div>
    </div>
    <div class="sideheadline">
        <div class="sideheadlineOne">
            <div class="imageheadlineOne">
                <a href="" id="SideHeadlineOne"><img src="picture.jpg" height="100%;" width="100%"/></a>
                <div class="sideHeadingOne">
                    <h1><a href="" id="SideOneLink">Title</a></h1>
                    <p> by <a href="">Author Date</a><a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
        </div>
        <div class="sideheadlineTwo">
            <div class="imageheadlineTwo">
                <a href="" id="SideHeadlineTwo"><img src="picture.jpg" height="100%;" width="100%"/></a>
                <div class="sideHeadingTwo">
                    <h2><a href="" id="SideTwoLink">Title</a></h2>
                    <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
            <div class="imageheadlineThree">
                <a href="" id="SideHeadlineThree"><img src="picture.jpg" height="100%;" width="100%;"/></a>
                <div class="sideHeadingThree">
                    <h2><a href="" id="SideThreeLink">Title</a></h2>
                    <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>

链接:https://jsfiddle.net/3pdod8cr/

1 个答案:

答案 0 :(得分:2)

首先:没有CSS属性overflowY

$('html, body').css('overflowY', 'hidden');

但是,有一些名为overflow-yoverflow-xoverflow的CSS属性。在这种情况下,没有理由不使用简化的overflow属性。

$('html, body').css('overflow', 'hidden');

第二:当用户点击模式外时,您必须再次设置overflow: visible

$(this).click(function (event) {
    if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length) {
        $('html, body').css('overflow', 'visible');
        $(".MainHeadlineOverlay").hide();
    }
});

$(this).click(function (event) {
    if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length) {
        $('html, body').css('overflowY', 'visible');
        $(".RightHeadlineOverlayOne").hide();
    }
}); 

有更好的方法可以做到这一点,但这超出了问题的范围。

第三:对于要溢出的元素,首先必须具有设置的高度。只需将高度设置为100%,overflow: hidden就可以按照您的意愿运行。

html, body {
    height: 100%;
}

Demo