admin管理员组

文章数量:1335402

Whenever I click on "Urunler" in the menu I created I can successfully open and close the dropdown menu under "Urunler". When I click outside the box it also successfully closes the dropdown menu. In order to regenerate the problem I am facing do this and see yourself.

1)Click on "Urunler" and make sure dropdown menu is opened. 2)Click on somewhere outside the dropdown menu and "Urunler" and make sure dropdown menu is closed. 3)Click on "Urunler" again to open up the dropdown menu.

It does not open the dropdown menu in the first attempt but the second one works.

I am a plete noob and I dont really know what I am doing. I tried going through the topic in Javascript called variable scopes but could not really get the reason why the glitch happens. 

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

When clicked outside the box how to make the dropdown menu open up with a single click? I would be appreciated for the answer.

Whenever I click on "Urunler" in the menu I created I can successfully open and close the dropdown menu under "Urunler". When I click outside the box it also successfully closes the dropdown menu. In order to regenerate the problem I am facing do this and see yourself.

1)Click on "Urunler" and make sure dropdown menu is opened. 2)Click on somewhere outside the dropdown menu and "Urunler" and make sure dropdown menu is closed. 3)Click on "Urunler" again to open up the dropdown menu.

It does not open the dropdown menu in the first attempt but the second one works.

I am a plete noob and I dont really know what I am doing. I tried going through the topic in Javascript called variable scopes but could not really get the reason why the glitch happens. 

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

When clicked outside the box how to make the dropdown menu open up with a single click? I would be appreciated for the answer.

  • javascript
  • html
  • css
Share Improve this question edited May 16, 2021 at 4:40 Codecygen asked Dec 25, 2018 at 18:14 CodecygenCodecygen 1211 gold badge2 silver badges11 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

Hi the problem happens because your flag (value variable) is not set to proper state on dropHide function. However there are lots of possible optimizations to your code and I tried to show you one a better way in below fiddle:

You do not need variable as flag you can use a class for it for example .show class and this will allow you to make use of classList methods to toggle remove - add it this way you get rid of inline css too.

// 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/6azurh7L/1/

Edit:

After looking at your fiddle and my example again, you could still use value if you'd like, you just need to set it to 0 in dropHide.

Original Answer:

Your problem is that you over engineered your solution. Think about the logic of your function:

  • Once clicked, check value.
  • Depending on value either show or hide the dropdown.
  • Then flip value

That's all your function does, and will ever do so it's working as it should. When you click outside, the classes are all removed and the dropdown disappears. The problem is that you didn't detect that and flip value.

Much better would be to check something that is attached to the dropdown AND is affected by a mouse click outside the dropdown. The correct choice then, is to check whether the dropdown is hidden or not with each click and then perform the appropriate action. No need to manually change the value variable as you no longer need it! I've included an example below, enjoy!

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="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="#">LORUM IPSUM</a></li>
                <li><a href="#">LORUM IPSUM</a></li>
                <li id="products"><a href="#">LORUM IPSUM</a>
                    <ul id="dropdown" class="dropdownMenu">
                        <li><a href="#">LORUM IPSUM 1</a></li>
                        <li><a href="#">LORUM IPSUM 2</a></li>
                        <li><a href="#">LORUM IPSUM 3</a></li>
                        <li><a href="#">LORUM IPSUM 4</a></li>
                    </ul>
                </li>
                <li><a href="#">LORUM IPSUM</a></li>
            </ul>
        </nav>
    </div>
    
    <script src="main.js"></script>

</body>

</html>

本文标签： javascriptClosing Dropdown Menu by Clicking Outside the BoxStack Overflow

版权声明：本文标题：javascript - Closing Dropdown Menu by Clicking Outside the Box - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742388011a2465426.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。