我有一个使用 JavaScript 的下拉菜单。它在 Firefox(版本 57)中可靠地工作。但是,在 Chrome(版本 62)中,仅当您首先单击页面上的其他位置,然后单击菜单图标/按钮时,才会出现下拉菜单。我正在使用 jQuery 3.2.1 和 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>
最佳答案
我已经测试了 Chrome 62 和 Firefox 57 中提供的代码。我无法重现您描述的行为:
...in Chrome (version 62) the drop menu only appears if you first click elsewhere on the page, and then on the menu icon / button
但是,当您单击 <img>
时会出现问题在<button>
里面这是由 <img>
引起的作为 Chrome 中的事件目标。您可以通过更改条件来检查 #button
来解决此问题是目标本身或目标的父节点。
所以改变if (event.target.id == "button")
至 if (event.target.id == "button" || event.target.parentNode.id == "button")
.
var shown;
$(function() {
shown = false;
});
window.onclick = function(event) {
if (event.target.id == "button" || event.target.parentNode.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>
关于javascript - 下拉菜单在 Firefox 中运行良好,但在 Chrome 中不可靠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47475572/