Close dropdown menu after click outside of navbar using only JavaScript?

Uncategorized 3 分

Close dropdown menu after click outside of navbar using only JavaScript?

I want to make a drop-down menu which one is very simple and when after click outside of nav its automatically hide. note I already make drop-down menu but… I don’t understand how to close it. here is my HTML and javascript code.

<section class="dropdownone">

Dropdown One


  • Click Dropdown

    • home
    • about
    • profile

    • </section>

    Possible duplicate of How do I detect a click outside an element?
    – Lars-Olof Kreim
    Jul 3 at 7:58

    write an event that checks if the select dropdown is out of focus, ie, it is blurred, you need to write a blur event, when that event is fired, hide the dropdown menu.
    – Code_Ninja
    Jul 3 at 8:14

    2 Answers
    2

    Using JavaScript :

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropdown a:hover {background-color: #ddd;}

    .show {display: block;}
    </style>
    </head>
    <body>

    <h2>Clickable Dropdown</h2>
    <p>Click on the button to open the dropdown menu.</p>

    Dropdown

    Home
    About
    Profile

    </div>

    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i

    </body>
    </html>

    the question is about clicking outside an dropdown, not about an hover state
    – Lars-Olof Kreim
    Jul 3 at 8:15

    I modified the code, now it is about clicking I hope my answer will help you
    – Husam Ebish
    Jul 3 at 8:22

    can you tell me how can i do it by using foreach or map or filter ?
    – Noyon Ahmed
    Jul 3 at 9:30

    yes of course, i will post the new answer
    – Husam Ebish
    Jul 3 at 9:42

    Close dropdown menu after click outside of navbar using JavaScript and Menu filter :

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
    }

    #myInput {
    border-box: box-sizing;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
    }

    #myInput:focus {outline: 3px solid #ddd;}

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    }

    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropdown a:hover {background-color: #ddd;}

    .show {display: block;}
    </style>
    </head>
    <body>

    <h2>Search/Filter Dropdown</h2>
    <p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

    Dropdown

    About
    Base
    Blog
    Contact
    Custom
    Support
    Tools

    </div>

    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
    }

    function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i -1) {
    a[i].style.display = "";
    } else {
    a[i].style.display = "none";
    }
    }
    }

    </body>
    </html>

    @Noyon Ahmed, is that what you want?
    – Husam Ebish
    Jul 3 at 9:49

    By clicking “Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

    發表者：tyjny tjjnyt

    已發表

    發表留言