Question

每当我在创建的菜单中单击“ Urunler”时，都可以成功打开和关闭“ Urunler”下的下拉菜单。当我在框外单击时，它也会成功关闭下拉菜单。为了重现我所面临的问题，请执行此操作并查看您自己。

1）单击“ Urunler”，并确保打开了下拉菜单。 2）点击下拉菜单和“ Urunler”之外的某处，并确保下拉菜单已关闭。 3）再次单击“ Urunler”以打开下拉菜单。

第一次尝试不打开下拉菜单，但第二次尝试可以打开。

我是一个完全菜鸟，我真的不知道我在做什么。我尝试遍历Javascript中的称为可变作用域的主题，但无法真正了解发生故障的原因。

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF8">
    <meta name="description" content="Aras Mühendislik Makina">
    <meta name="keywords" content="Dik İşleme, CNC, Talaşlı İmalat">
    <meta name="author" content="Aras">
    <meta http-equiv="refresh" content="180">
    <title>Aras Mühendislik Makina</title>

    <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";
}

在框外单击时如何单击以打开下拉菜单？谢谢您的回答。

Answer 1

嗨，发生问题的原因是您的标志（值变量）未在dropHide函数上设置为正确的状态。但是，您的代码有很多可能的优化方法，我试图在下面的小提琴中向您展示一种更好的方法：

您不需要变量作为标志，您可以为其使用类，例如.show class，这将使您可以使用classList方法来切换remove-通过这种方式添加它也可以消除内联css。 / p>

// 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>

https://jsfiddle.net/6azurh7L/1/

Answer 2

编辑：

再次查看小提琴和我的示例后，您仍然可以根据需要使用value，只需在dropHide中将其设置为0。

原始答案：

您的问题是您过度设计了解决方案。考虑一下函数的逻辑：

单击一次，选中value。
取决于value显示还是隐藏下拉菜单。
然后翻转value

这就是您的函数所要做的，并且会一直这样做，它将按预期工作。当您在外部单击时，所有类都将被删除，并且下拉列表也将消失。问题是您没有检测到并翻转value。

更好的方法是检查下拉列表中附加的内容，并在下拉列表外部单击鼠标来影响它。正确的选择是检查每次单击是否隐藏下拉菜单，然后执行适当的操作。您不再需要手动更改value变量！我在下面提供了一个示例，请尽情享受！

var value = 0;
document.getElementById("products").addEventListener("click", dropShow);
window.addEventListener("mouseup", dropHide);


function dropShow(){
    let myElement = document.getElementById("dropdown");
    if(myElement.style.overflow == "hidden"){
        myElement.style.overflow = "visible";
        myElement.style.height = "200px";
    }else{
        myElement.style.overflow = "hidden";
        myElement.style.height = "0px";
    }
}



function dropHide(){  
    document.getElementById("dropdown").style.overflow = "hidden";
    document.getElementById("dropdown").style.height = "0px";
}

*{
    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;
}

<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF8">
	<meta name="description" content="Aras Mühendislik Makina">
	<meta name="keywords" content="Dik İşleme, CNC, Talaşlı İmalat">
	<meta name="author" content="Aras">
	<meta http-equiv="refresh" content="180">
	<title>Aras Mühendislik Makina</title>

	<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>

通过在框外单击来关闭下拉菜单

2 个答案:

编辑：

原始答案：