Javascript - 显示："none"不起作用

Question

我正在尝试编程我自己的电子商店(非商业的当然)，我有一个问题与JavaScript和display:"none"。当我点击登录<h4 class="login">Log in</h4>acc_drop改变显示块，但如果我点击关闭<span class="close">x</span>什么都没有发生。控制台说acc_drop display = "none"。我不知道我哪里错了。

感谢您的回复。

window.onload = function () {
let acc = document.querySelector(".acc");
let accdrop = document.querySelector(".acc_drop");
let closebtn = document.querySelector(".close");

acc.onclick = function () {
if (accdrop.style.display = "none") {
accdrop.style.display = "block";
}
}
closebtn.onclick = function() {
accdrop.style.display = "none";
console.log(accdrop.style.display);
}
}

.acc{
padding: 10px;
}
.acc .prihlaseni{
color: #6B6B6B;
cursor: pointer;
}
.acc .prihlaseni:hover{
text-decoration: underline;
}
.acc .acc_drop{
display: none;
position: absolute;
z-index: 80000;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F5F5F5;
box-shadow: 0 0 5px 0 ;
width: 260px;
height: 300px;
border-radius: 5px;
text-align: center;
}
.acc .acc_drop .close{
position: absolute;
top: 0;
right: 0;
font-size: 11px;
color: #F5F5F5;
background-color: #9e1b1b;
border-radius: 0 5px 0 5px;
padding: 5px;
cursor: pointer;
}
.acc .acc_drop .close:active{
background-color: #5f0606;
}
.acc .acc_drop .login-title{
margin-top: 10px;
font-size: 8px;
}
.acc .acc_drop form{
display: flex;
flex-direction: column;
padding: 10px;
text-align: left;
margin: 0;
}
.acc label{
text-align: left;
font-size: 9px;
font-weight: 400;
}
.acc .acc_drop input{
width: 100%;
height: 20px;
margin-top: 8px;
outline: none;
border: 1px solid #6B6B6B;
border-radius: 3px;
box-shadow: 0 0 2px #00FFDD inset;
}
.acc .acc_drop .loginform{
margin-top: 5px;
}

.acc .acc_drop input:focus, textarea:focus {
box-shadow: 0 0 7px #00FFDD;
border: 1px solid #6B6B6B;
}
.acc .acc_drop .reg{
padding: 10px;
}
.acc .acc_drop .accbtn{
height: 20px;
margin-top: 10px;
margin-bottom: 5px;
border: none;
background-color: #6B6B6B;
border-radius:  5px ;
color: #00FFDD;
font-size: 9px;
font-weight: 600;
cursor: pointer;
outline: none;
}
.acc .acc_drop a{
color: #6B6B6B;
text-decoration: underline;
float: right;
font-size: 9px;
}
.acc .acc_drop a:hover{
text-decoration: none;
}
.acc .acc_drop .reg::before{
content: "";
display: block;
border-bottom: 1px solid #6b6b6b86;
width: 100%;
}
.acc .acc_drop .registr p{
margin-top: 10px;
font-size: 10px;
}
.acc .acc_drop .registr button{
height: 20px;
width: 100%;
margin-top: 5px;
border: none;
background-color: #9e1b1b;
border-radius: 5px ;
color: #ffffff;
font-size: 9px;
font-weight: 600;
cursor: pointer;
outline: none;
}
.acc .acc_drop .accbtn:hover{
background-color: #868686;
transition: 1s;
}
.acc .acc_drop .registr button:hover{
background-color: #e41919;
transition: 1s;
}
.acc .acc_drop .accbtn:active{
background-color: #474747;
transition: none;
}
.acc .acc_drop .registr button:active{
background-color: #5a0b0b;
transition: none;
}

<div class="acc"> <h4 class="prihlaseni">Přihlásit se</h4>

<div class="acc_drop">
<span class="close">x</span>

<form action="">
<div class="login-title"><h1>Přihlášení</h1></div>
<div class="loginform mail">
<label>E-mail *</label>
<input class="e-mail" type="text" required>
</div>
<div class="loginform heslo">
<label>Heslo *</label><a href="">Zapomněl(a) jsem heslo</a>
<input class="heslo" type="password"  required>
</div>
<button class="accbtn" type="submit">Přihlásit se</button>
</form>
<div class="reg">
<div class="registr">
<p>Ještě nemáte účet?</p>
<button>Zaregistrovat se</button>
</div>
</div>
</div>
</div>

Answer 1

问题是您的if条件在acc.onclick:

acc.onclick = function () {
if (accdrop.style.display = "none") {
accdrop.style.display = "block";
}
}

不是比较，而是赋值:

if (accdrop.style.display = "none")

它应该是:

if (accdrop.style.display === "none")

Answer 2

closebtn在acc内。当您单击关闭时，事件会重新弹出，击中两个事件处理程序。您可以通过调用event.stopPropagation():

来避免这种情况。

closebtn.onclick = function() {
accdrop.style.display = "none";
console.log(accdrop.style.display);
event.stopPropagation();
}

同样，您应该检查accdrop的显示属性值。当您使用accdrop.style.display进行验证时，它不会像预期的那样工作，因为使用display: none的css类不会触发。它将只验证style属性，而不是其计算值:

acc.onclick = function () {
const accdropDisplayValue = window.getComputedStyle(accdrop)
.getPropertyValue('display');
if (accdropDisplayValue === "none") {
accdrop.style.display = "block";
}
}

Answer 3

也可以尝试在h1上注册一个事件

window.onload = function () {
let prihlaseni = document.querySelector(".prihlaseni");
let accdrop = document.querySelector(".acc_drop");
let closebtn = document.querySelector(".close");
prihlaseni.onclick = function () {
if (accdrop.style.display === "none") {
accdrop.style.display = "block";
}
}

Answer 4

试试这个:

.acc {
padding: 10px;
}
.acc .prihlaseni {
color: #6B6B6B;
cursor: pointer;
}
.acc .prihlaseni:hover {
text-decoration: underline;
}
.acc .acc_drop {
display: none;
position: absolute;
z-index: 80000;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F5F5F5;
box-shadow: 0 0 5px 0;
width: 260px;
height: 300px;
border-radius: 5px;
text-align: center;
}
.acc .acc_drop .close {
position: absolute;
top: 0;
right: 0;
font-size: 11px;
color: #F5F5F5;
background-color: #9e1b1b;
border-radius: 0 5px 0 5px;
padding: 5px;
cursor: pointer;
}
.acc .acc_drop .close:active {
background-color: #5f0606;
}
.acc .acc_drop .login-title {
margin-top: 10px;
font-size: 8px;
}
.acc .acc_drop form {
display: flex;
flex-direction: column;
padding: 10px;
text-align: left;
margin: 0;
}
.acc label {
text-align: left;
font-size: 9px;
font-weight: 400;
}
.acc .acc_drop input {
width: 100%;
height: 20px;
margin-top: 8px;
outline: none;
border: 1px solid #6B6B6B;
border-radius: 3px;
box-shadow: 0 0 2px #00FFDD inset;
}
.acc .acc_drop .loginform {
margin-top: 5px;
}
.acc .acc_drop input:focus,
textarea:focus {
box-shadow: 0 0 7px #00FFDD;
border: 1px solid #6B6B6B;
}
.acc .acc_drop .reg {
padding: 10px;
}
.acc .acc_drop .accbtn {
height: 20px;
margin-top: 10px;
margin-bottom: 5px;
border: none;
background-color: #6B6B6B;
border-radius: 5px;
color: #00FFDD;
font-size: 9px;
font-weight: 600;
cursor: pointer;
outline: none;
}
.acc .acc_drop a {
color: #6B6B6B;
text-decoration: underline;
float: right;
font-size: 9px;
}
.acc .acc_drop a:hover {
text-decoration: none;
}
.acc .acc_drop .reg::before {
content: "";
display: block;
border-bottom: 1px solid #6b6b6b86;
width: 100%;
}
.acc .acc_drop .registr p {
margin-top: 10px;
font-size: 10px;
}
.acc .acc_drop .registr button {
height: 20px;
width: 100%;
margin-top: 5px;
border: none;
background-color: #9e1b1b;
border-radius: 5px;
color: #ffffff;
font-size: 9px;
font-weight: 600;
cursor: pointer;
outline: none;
}
.acc .acc_drop .accbtn:hover {
background-color: #868686;
transition: 1s;
}
.acc .acc_drop .registr button:hover {
background-color: #e41919;
transition: 1s;
}
.acc .acc_drop .accbtn:active {
background-color: #474747;
transition: none;
}
.acc .acc_drop .registr button:active {
background-color: #5a0b0b;
transition: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="acc">
<h4 class="prihlaseni" onclick='document.querySelector(".acc_drop").style.display = "block";'>Přihlásit se</h4>
<div class="acc_drop">
<span class="close" onclick='document.querySelector(".acc_drop").style.display = "none";'>x</span>
<form action="">
<div class="login-title">
<h1>Přihlášení</h1>
</div>
<div class="loginform mail">
<label>E-mail *</label>
<input class="e-mail" type="text" required>
</div>
<div class="loginform heslo">
<label>Heslo *</label><a href="">Zapomněl(a) jsem heslo</a>
<input class="heslo" type="password" required>
</div>
<button class="accbtn" type="submit">Přihlásit se</button>
</form>
<div class="reg">
<div class="registr">
<p>Ještě nemáte účet?</p>
<button>Zaregistrovat se</button>
</div>
</div>
</div>
</div>

我刚刚把JavaScript改成了inline JavaScript，解决了这个问题，节省了你一些空间:

onclick='document.querySelector(".acc_drop").style.display = "block";'

和

onclick='document.querySelector(".acc_drop").style.display = "none";'