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

我正在制作的菜单有一个新问题。我试图在用户单击菜单本身之外时将其隐藏。我无法检查元素的显示值，因为它总是可见的，但被转换到元素的右侧，因此不在可见DOM中

问题是按钮本身不起作用，而且点击屏幕时菜单正在激活，因此我尝试验证div是否可见的尝试没有起作用；很多人都这么建议，但我还是坚持使用document.body.containsMyElement。 这是我的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>

如果您不想查看代码，JSFIDLE在这里：

---

谢谢你的帮助

检查元素在屏幕上是否可见是一个很难解决的问题，但我认为您不需要解决它来完成任务。可能有一些原因需要这样做，但是，如果没有，您可以只检查使该元素可见的类的存在，而不是检查元素在屏幕上是否可见

我本想少修改javascript，但我花了一点时间才记住传播问题的解决方案。默认情况下，单击按钮也算作单击文档，除非添加event.stopPropagation，而且我更容易重写。不过，同样的原则也可以应用到您的解决方案中

顺便说一下，这是一个非常好的汉堡吧/x按钮转换

var按钮=document.querySelector'buton-meniu'； var content=document.querySelector'dropdown-meniu-content'； 按钮。添加EventListener“单击”，函数E{ e、 停止传播； e、 currentTarget.classList.toggle'change'； content.classList.toggle'show'； }是的 document.addEventListener“单击”函数{ 如果content.classList.contains'show'{ 移除'show'； 按钮。类列表。删除“更改”； } } content.addEventListener'click'，函数E{ e、 停止传播； } .标志{ 浮动：左； 边缘顶部：10px； 左边距：5px； 宽度：200px； 高度：100px； } 梅尼乌先生{ 浮动：对； 宽度：自动； } 布顿·梅尼奥先生{ 显示：块； 光标：指针； 宽度：35px； 右边距：30px； 边缘顶端：40px； } .bar1、.bar2、.bar3{ 宽度：35px； 高度：5px； 背景色：黑色； 利润率：6px0； 过渡：0.4s； } .找零{ -webkit变换：旋转-45度平移-9px，6px； 变换：旋转-45度平移-9px，6px； } .找零{ 不透明度：0； } .找零{ -webkit变换：旋转45度平移-8px，-8px； 变换：旋转45度平移-8px，-8px； } .下拉菜单{ 位置：相对位置； 显示：内联块； } .下拉菜单中的内容{ 顶部：110px； 位置：固定； 背景色：D6； 宽度：30%； 最大宽度：10000px； 身高：100%； 盒影：0px 8px 16px 0px rgba0,0,0.2； z指数：1； 溢出：隐藏； 右：0； 转化：转化率100%； 转型：转型0.5s轻松； } .表演{ 转化：translateX0%； } 费雷斯特

---

所以，您想只在单击按钮meniu时显示菜单，而在文档中的任何位置单击时隐藏菜单？好吧，我想用按钮隐藏菜单，并通过单击菜单外的菜单本身来隐藏它。您的解决方案正在按预期工作，我没有任何别有用心的动机来检查我的菜单是否可见。我认为这是解决这个问题的最好办法。你能给我提供一个关于传播事件的链接或教程吗？我是一个NoOB在JavaScript，我真的想学习它我已经知道一些C++和PHP。再次感谢！我希望我有机会送你去。MDN总是我的第一个参考资料，虽然通常更多的是文档而不是教程，但它们有一个：。FreeCodeCamp通常相当不错，他们也有一个解释者：W3学校足够好吗？我从他们那里学到了CSS、HTML和一些PHP，这似乎是一个不错的网站，但人们说它已经过时了，所以当我第一次学习时，有人把我指给了MDN而不是W3学校，所以我对它比较满意，但是，因为

---

几乎总是先去MDN，我没怎么用过W3，也不知道是否有实质性的区别。我确实认为MDN网站看起来更好，因为主题是前端开发，这应该是有意义的。非常感谢你的回答。我将使用这两个源来学习，当然，当我陷入困境时，还会使用堆栈溢出。