Voytek Posted January 14, 2020 Share Posted 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> <!--[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; 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? Link to comment Share on other sites More sharing options...
Funce Posted January 15, 2020 Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2020 Share Posted January 15, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Voytek Posted January 16, 2020 Author Share Posted 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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now