个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:33:08 24 4
gpt4 key购买 nike

每当我在我创建的菜单中单击“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>

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

关于javascript - 通过在框外单击关闭下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53924620/

24 4 0
文章推荐： javascript - 用javascript分离分割字符串
文章推荐： swift - Alamofire 的 .responseString 方法有什么用？
文章推荐： javascript - 如果属性值匹配，则从数组中删除对象
文章推荐： css - IE6 和 IE7 导航列表项 float 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com