The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

Question

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why the code is not functioning properly and some clarification on the matter would be beneficial.

let btnn = document.getElementById("btn");
btnn.addEventListener('click', function() {
  let dropdown = document.getElementById('dropdown');
  dropdown.classList.toggle("visible");
})

window.onclick = function(event){
    if (!event.target.matches('#btn')) {
        let dropd = document.getElementById('dropdown');
        dropd.classList.remove("visible");
    } 
}

body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.logo {
    display: block;
    text-align: left;
    background: red;
    height: 10vh;
}

.logo #logo {
    display: inline;
    line-height: 10vh;
    font-size: 3em;
    margin-left: 0.8em;
    
}

button#btn {
    display: inline;
    float: right;
    margin-right: 2em;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    background-color: red;
    padding: 0;
}

nav {
    display: block;
    background-color: black;
    width: 100vw;
}

nav ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

nav ul li {
    text-align: center; 
}

.link {
    display: block;
    color: white;
    font-size: 2.4em;
    background-color: blue;
    text-decoration: none;
    width: 100vw;
    height: 7vh;
    line-height: 7vh;
    border-bottom: 2px solid black;
    text-align: center;
}

.visible {
    display: block;
}

.fa-bars:before, .fa-navicon:before {
    content: "\f0c9";
    font-size: 50px;
    line-height: 10vh;
}

@media only screen and (min-width: 480px) { 
    
    .fa-bars:before, .fa-navicon:before {
        font-size: 35px;
    }

    /* #dropdown {
        display: block;
    } */

}
  
  @media only screen and (min-width: 600px) {

    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }
    
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn"><i class="fa-solid fa-bars"></i></button>
  </div>
   <nav>
     <ul id="dropdown">
       <li><a href="#" class="link">Link 1</a></li>
       <li><a href="#" class="link">Link 2</a></li>
       <li><a href="#" class="link">Link 3</a></li>
     </ul>
   </nav>
    <script src="script.js"></script>
  </body>
</html>

javascript html css dropdown

Answer 1

Answer №1

Allow me to optimize your JavaScript code for better performance and accuracy.

document.querySelector("body").addEventListener("click", function(event){  
  let dropd = document.querySelector('#dropdown');
  if (!event.target.parentNode.matches('#btn')) {    
    dropd.classList.remove("visible");
  } else {
    dropd.classList.toggle("visible");
  }
});

By restructuring the code in this manner, we can prevent any conflicts between button click events and window click events. By checking if the click target matches the button ID, we can perform the appropriate action accordingly.

*** The use of parentNode is to ensure that the click event is detected on the intended element. By logging the event, you can observe that clicks may register on inner elements such as icons within a button. Thus, checking the parent node helps determine the exact location of the click.

Answer 2

Allow me to optimize your JavaScript code for better performance and accuracy.

document.querySelector("body").addEventListener("click", function(event){  
  let dropd = document.querySelector('#dropdown');
  if (!event.target.parentNode.matches('#btn')) {    
    dropd.classList.remove("visible");
  } else {
    dropd.classList.toggle("visible");
  }
});

By restructuring the code in this manner, we can prevent any conflicts between button click events and window click events. By checking if the click target matches the button ID, we can perform the appropriate action accordingly.

*** The use of parentNode is to ensure that the click event is detected on the intended element. By logging the event, you can observe that clicks may register on inner elements such as icons within a button. Thus, checking the parent node helps determine the exact location of the click.

Answer 3

Answer №2

To implement this functionality, you can use the following JavaScript code snippet in your file:

let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  let dropdown = document.getElementById('dropdown');
  dropdown.classList.toggle('visible');
});

document.body.addEventListener('click', () => {
    let dropDown = document.getElementById('dropdown');
    dropDown.classList.remove('visible');
}, true);

Answer 4

To implement this functionality, you can use the following JavaScript code snippet in your file:

let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  let dropdown = document.getElementById('dropdown');
  dropdown.classList.toggle('visible');
});

document.body.addEventListener('click', () => {
    let dropDown = document.getElementById('dropdown');
    dropDown.classList.remove('visible');
}, true);

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

Answer №1

Answer №2

Similar questions

Prevent TypeScript from generalizing string literals as types

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

The behavior of React Router varies between local development on localhost and deployment on Heroku

What is the best way to handle an ajax call while working with the main Vue instance?

Transferring the AJAX response into a JavaScript variable

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

Is there a way to escape from an iFrame but only for specific domains?

Enhance the functionality of selectize.js by incorporating select options through ajax

Retrieving the Vue component object while inside the FullCalendar object initialized within the component

Is there a way to make a selected option stay selected in vue.js 2?

What is the correct method for caching fonts within an Angular application?

Aligning cards

Create a list that starts with a header determined by an object's attribute within an array

What is the best way to handle a specific submit button using jQuery/Ajax?

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in

Selecting elements by their name using vanilla JavaScript

My goal is to send distinct entries for each user that accesses the system from a MySQL database

React and Express are incompatible due to the error message "TypeError: undefined is not a function

Embed a Telegram account onto an HTML page using the <iframe> element

Troubleshooting: Imported Variable in Angular 2+ Throwing Module Not Found Error