Drop down menu not working

Voytek · January 14, 2020

Help.

I'm trying to implement a simple dropdown menu into html document.
My head looks like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuadQuest</title>

// 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 < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}</script>
</head>

It works in the old IE11, but don't work in Chrome and Edge. If I remove the script from the head, don't work in nether of those browsers. Any ideas please?

Funce · January 15, 2020

Your code has been affected by the forum formatter.

Please make sure you put your code inside code blocks to prevent this from occuring

dsonesuk · January 15, 2020

I've seen this before, Edge does not, or did not support 'event.target.matches' it uses a specific Edge code instead of .matches.

Found it

http://w3schools.invisionzone.com/topic/56627-how-i-use-this-script-for-2-functions-same-works/?tab=comments#comment-311543

Edited January 15, 2020 by dsonesuk

Voytek · January 16, 2020

23 hours ago, Funce said:

Your code has been affected by the forum formatter.

Please make sure you put your code inside code blocks to prevent this from occuring

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuadQuest</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="styles/page.css" rel="stylesheet" type="text/css">
<link href="styles/menu.css" rel="stylesheet" type="text/css">    
    <link href="webfonts/ArialNova/stylesheet.css" type="text/css">
    <script type="text/javascript" src="styles/menu.js"></script>
   <script type="text/javascript"> 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 < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}</script>
</head>

Sign In

Drop down menu not working

Recommended Posts

Voytek

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Voytek

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity