我正在制作一个菜单的新问题。当用户点击菜单本身外部时，我试图隐藏它。我无法检查元素的显示值，因为它始终可见但已转换到元素的右侧，因此不在可见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/
感谢您的帮助！
答案 0 :(得分：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>