检查元素是否在屏幕上可见

Question

我在制作菜单时遇到新问题。 当用户在菜单本身之外单击时，我试图使其隐藏。 我无法检查元素的显示值，因为它始终可见，但已转换到元素的右侧，因此不在可见的DOM中。

问题在于按钮本身不起作用，并且在单击屏幕时菜单处于激活状态，因此我尝试验证div是否可见不起作用。我也尝试使用一个功能与getBoundingClientRect(); 很多人在暗示，但是我坚持使用document.body.contains(MyElement) 。 这是我的JavaScript：

function myFunction(x) {
        x.classList.toggle("change");
        document.getElementById("dropdown-meniu-content").classList.toggle("show");}
 $(document).click(function(event) { 
    if ( document.body.contains(document.getElementById('dropdown-meniu-content') ) ) {
        if(!$(event.target).closest('#dropdown-meniu-content').length) {
        document.getElementById("dropdown-meniu-content").classList.toggle("show");
                    document.getElementById("buton-meniu").classList.toggle("change");
        }        
}

}）; CSS是：

    .logo {
            float: left;
            margin-top: 10px;
            margin-left: 5px;
            width: 200px;
            height: 100px;
        }
        .meniu {
            float: right;
            width: auto;
        }
        .buton-meniu {
            display: block;
            cursor: pointer;
            width: 35px;
            margin-right: 30px;
            margin-top: 40px;
        }
        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: black;
            margin: 6px 0;
            transition: 0.4s;
        }
        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }
        .change .bar2 {
            opacity: 0;
        }
        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
        .dropdown-meniu {
            position: relative;
            display: inline-block;
        }
        .dropdown-meniu-content {

            top: 110px;
            position: fixed;
            background-color: #d6d6d6;
            width: 30%;
            max-width: 10000px;
            height: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            overflow: hidden;
            right: 0;
            transform: translateX(100%);
            transition: transform 0.5s ease;
        }
        .show {
            transform: translateX(0%);
        }

和HTML：

<div class="meniu">
        <div class="dropdown-meniu">
            <div id="buton-meniu" class="buton-meniu" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
            <div id="dropdown-meniu-content" class="dropdown-meniu-content">
                <div class="dropdown-ferestre">
                    <div id="buton-ferestre" class="buton-ferestre">Ferestre</div>
                    <div id="dropdown-ferestre-content" class="dropdown-ferestre-content">
                        <p id="demo"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

如果您不想浏览代码，请参见JSFiddle： https ：//jsfiddle.net/1qrtb424/18/

感谢您的帮助！

Answer 1

检查屏幕上是否可见某个元素是一个很难解决的问题，但是我认为您无需解决该问题即可完成任务。 您可能有某种理由需要这样做，但是，如果没有这样做，则可以检查是否存在使该元素可见的类，而不是检查屏幕上是否可见某个元素。

我本来打算减少您的javascript，但是花了我一些时间来记住传播问题的解决方案（默认情况下，单击按钮也算作对文档的单击，除非您添加event.stopPropagation ），对我来说更容易重写。 但是，可以在您的解决方案中应用相同的原理。

顺便说一句，这是一个非常不错的burger-bar / x按钮转换。

 var button = document.querySelector('#buton-meniu'); var content = document.querySelector('#dropdown-meniu-content'); button.addEventListener('click', function(e) { e.stopPropagation(); e.currentTarget.classList.toggle('change'); content.classList.toggle('show'); }, true) document.addEventListener('click', function() { if (content.classList.contains('show')) { content.classList.remove('show'); button.classList.remove('change'); } }) content.addEventListener('click', function(e) { e.stopPropagation(); }) 

 .logo { float: left; margin-top: 10px; margin-left: 5px; width: 200px; height: 100px; } .meniu { float: right; width: auto; } .buton-meniu { display: block; cursor: pointer; width: 35px; margin-right: 30px; margin-top: 40px; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: black; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } .dropdown-meniu { position: relative; display: inline-block; } .dropdown-meniu-content { top: 110px; position: fixed; background-color: #d6d6d6; width: 30%; max-width: 10000px; height: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; overflow: hidden; right: 0; transform: translateX(100%); transition: transform 0.5s ease; } .show { transform: translateX(0%); } 

 <div class="meniu"> <div class="dropdown-meniu"> <div id="buton-meniu" class="buton-meniu" > <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div id="dropdown-meniu-content" class="dropdown-meniu-content"> <div class="dropdown-ferestre"> <div id="buton-ferestre" class="buton-ferestre">Ferestre</div> <div id="dropdown-ferestre-content" class="dropdown-ferestre-content"> <p id="demo"></p> </div> </div> </div> </div> </div>