I am encountering an issue with my JavaScript drop down menu. It functions properly in Firefox (version 57), but in Chrome (version 62) the drop-down only appears after clicking elsewhere on the page before clicking on the menu icon or button. My code includes jQuery 3.2.1 and Bootstrap 2.3.2.
var shown;
$(function() {
shown = false;
});
window.onclick = function(event) {
if (event.target.id == "button") {
if (shown)
$("#dropdown").hide();
else
$("#dropdown").show();
shown = !shown;
} else if (shown) {
$("#dropdown").hide();
shown = false;
}
}.dropdown {
display: none;
float: right;
right: 0;
margin-right: 7px;
position: absolute;
z-index: 1;
}
.dropdown a {
padding: 12px 16px;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="icon">
<button id="button">
<img src="cogwheel.png">
</button>
<div id="dropdown" class="dropdown">
<a href="todo2">Register</a>
<a href="todo1">Login</a>
</div>
</div>