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

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)，我重写起来更容易。不过，相同的原则可以应用于您的解决方案。

顺便说一句，这是一个非常漂亮的汉堡栏/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>