每当我在我创建的菜单中单击“Urunler”时，我都可以成功打开和关闭“Urunler”下的下拉菜单。当我在框外单击时，它也成功关闭了下拉菜单。为了重现我面临的问题，请这样做并看看你自己。
1) 单击“Urunler”并确保下拉菜单已打开。 2) 单击下拉菜单和“Urunler”之外的某处，确保下拉菜单已关闭。 3)再次点击“Urunler”打开下拉菜单。
它在第一次尝试时不打开下拉菜单，但第二次尝试打开。
我是一个彻头彻尾的菜鸟，我真的不知道自己在做什么。我尝试浏览 Javascript 中称为变量范围的主题，但无法真正了解故障发生的原因。
<html>
<head>
<meta charset="UTF8">
<meta http-equiv="refresh" content="180">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu">
<img src="logo.jpg" alt="Smiley face" id="logo">
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li id="products"><a href="#">Ürünler</a>
<ul id="dropdown" class="dropdownMenu">
<li><a href="#">Ürün 1</a></li>
<li><a href="#">Ürün 2</a></li>
<li><a href="#">Ürün 3</a></li>
<li><a href="#">Ürün 4</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
/* Width and height apply to all parts of the element: content, padding and borders */
box-sizing: border-box;
}
#menu{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#logo{
height: 70px;
width: 70px;
}
div nav{
display: flex;
/* This flexbox property lets button area to fill-in the remainin space until the logo area */
flex: 1;
}
div nav ul{
display: flex;
flex-direction: row;
background-color: mediumaquamarine;
justify-content: space-between;
flex: 1;
/* This flexbox property lets button area to fill-in the remainin space until the logo area */
}
div nav ul li{
display: flex; /* These 3 lines or the align the bottons vertically */
flex-direction: column; /* These 3 lines or the align the bottons vertically */
justify-content: center; /* These 3 lines or the align the bottons vertically */
list-style-type: none;
background-color: blue;
flex: 1;
/* This flexbox property lets button area to fill-in the remainin space until the logo area */
position: relative;
}
div nav ul li a{
display: flex; /* These 3 lines or the align the bottons vertically */
flex-direction: column; /* These 3 lines or the align the bottons vertically */
justify-content: center; /* These 3 lines or the align the bottons vertically */
text-decoration: none;
background-color: orange;
height: 50px;
text-align: center;
margin: 0.5px;
}
div nav ul li a:hover{
background-color: #9f7934;
}
.dropdownMenu{
display: flex;
flex-direction: column;
width: 100%;
top: 60px;
position: absolute;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Javascript
var value = 0;
document.getElementById("products").addEventListener("click", dropShow);
window.addEventListener("mouseup", dropHide);
function dropShow(){
if(value == 0){
document.getElementById("dropdown").style.overflow = "visible";
document.getElementById("dropdown").style.height = "200px";
}else{
document.getElementById("dropdown").style.overflow = "hidden";
document.getElementById("dropdown").style.height = "0px";
}
if(value == 0){
value = 1;
}else{
value = 0;
}
}
function dropHide(){
document.getElementById("dropdown").style.overflow = "hidden";
document.getElementById("dropdown").style.height = "0px";
}
当在框外单击时，如何通过单击打开下拉菜单？我将不胜感激。
最佳答案
您好，问题的发生是因为您的标志(值变量)未在 droHide 函数上设置为正确的状态。但是，您的代码有很多可能的优化，我试图在下面的 fiddle 中向您展示一种更好的方法:
你不需要变量作为标志，你可以为它使用一个类，例如 .show 类，这将允许你使用 classList 方法来切换删除 - 通过这种方式添加它你也可以摆脱内联 css。
//JS
document.addEventListener("click", toggleDropdown);
function toggleDropdown(event) {
var dropdown = document.getElementById("dropdown");
if (event.target.classList.contains('urunler')){
dropdown.classList.toggle('show');
} else {
dropdown.classList.remove('show');
}
//CSS
.dropdownMenu.show {
overflow:visible;
height:200px;
}
//HTML
<li id="products" class="products"><a href="#" class="urunler">Ürünler</a>
<ul id="dropdown" class="dropdownMenu">
<li><a href="#">Ürün 1</a></li>
<li><a href="#">Ürün 2</a></li>
<li><a href="#">Ürün 3</a></li>
<li><a href="#">Ürün 4</a></li>
</ul>
</li>
关于javascript - 通过在框外单击关闭下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53924620/