是(:visible)返回true,即使overlay是隐藏的jQuery

Question

我有一个脚本,我需要运行只有一个叠加是不可见的.

所以我使用了以下脚本:

示例如下,按钮显示/隐藏叠加.控制台日志结果

function overlay() {
  if( $('div#overlay').is(':visible') ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="overlay">
    Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />

编辑:跟踪纠正.因为它是一个id而不是一个类.现在,当我的叠加层不在屏幕上时.它返回'可见'.

此脚本始终返回 "可见".救命!!

谢谢

Answer 1

需要使用，因为if( $('div#overlay').is(':visible')){不是overlay：-idclass

if( $('div#overlay').is(':visible')){
   console.log("visible");
}else {
   console.log("not visible");
}

要回答您当前的问题，请使用if( el.style.visibility =='visible' ){如下所示：-

if( $('div#overlay').is(':visible')){
   console.log("visible");
}else {
   console.log("not visible");
}

function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  if( el.style.visibility =='visible' ){
   	    console.log("visible");
	}
	else {
	    console.log("not visible");
    }
};

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:40%;
     height: 40%;
     text-align:center;
     z-index: 1000;
     display: inline-block;
     background-color: orange;
     /*Flexbox*/
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
}

form.overlay-form {
     width:780px;
}
table.overlay-table {
	position: relative;
	text-align: center;
}
table.overlay-table tr td {
	background: rgb(54, 25, 25); 
	background: rgba(54, 25, 25, 0); 
	border-style: none;
	margin-right: 40%;
	margin-bottom: 30%;
	position: relative;
	text-align: center;
	width: 800px;
}
.button {
  z-index:1000;
}

原因：-

基于文档：- https://api.jquery.com/visible-selector/

如果元素占用了文档中的空间，则它们被视为可见。

因为覆盖 div 总是得到visibility:hidden所以基本上它的空间在那里，这就是为什么:visible总是返回 true。

如果你想使用:visible然后display:none;做display:block;